Combobox

View source Report an issue

Combobox combines a text input with a list of suggested values. Combobox wraps Reach UI's Combobox component with default styling and accepts all the same props. See the Reach UI docs for details.

Arbitrary components can be nested inside the Combobox.Popover to allow for more advanced usecases, e.g. adding a new value to the list of suggestions

Note that when combined with a Label, the id that matches the Label's htmlFor prop should go on the Combobox.Input.

<div className="w-100">
  <Label className="mb-3" htmlFor="someid">
    What's your favourite fruit?
  </Label>
  <Combobox onSelect={console.log} openOnFocus>
    <Combobox.Input id="someid" />
    <Combobox.Popover>
      <Combobox.List>
        <Combobox.Option value="Apple" />
        <Combobox.Option value="Banana" />
        <Combobox.Option value="Cranberry" />
        <Combobox.Option value="Dragon fruit" />

        <div className="flex items-center p-2">
          <Input size="sm" placeholder="New fruit" />
          <Button
            size="sm"
            className="ml-2"
            onClick={() =>
              alert('Nest other interactive UI here for advanced usecases')
            }
          >
            Add a new fruit
          </Button>
        </div>
      </Combobox.List>
    </Combobox.Popover>
  </Combobox>
</div>

API Reference

Combobox

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

Combobox.Input

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	`standard`	-
`as`	`JSX.IntrinsicElements`	-	-
`autocomplete`	`boolean`	-	-
`selectOnClick`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	`md`	-
`state`	`"error"`	-	-
`theme`	`"white"` \| `"grey"`	-	-
`value`	`string`	-	-

Combobox.Popover

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`hidden`	`boolean`	-	-
`portal`	`boolean`	-	-
`position`	`Position`	-	-
`targetRef`	`RefObject<PossibleNode>`	-	-
`unstable_observableRefs`	`RefObject<PossibleNode>[]`	-	-

Combobox.List

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`persistSelection`	`boolean`	-	-

Combobox.Option

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`children`	`null` \| `string` \| `number` \| `bigint` \| `false` \| `true` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>` \| `Iterable<ReactNode>` \| `ReactPortal` \| `Promise<AwaitedReactNode>` \| `(props: ComboboxOptionContextValue) => ReactNode`	-	-
`index`	`number`	-	-
`value`	`string`	-