TaylorUI - The Functn UI Kit

A combobox allows a user to select an option from a dropdown list and search for options by typing.

Fruit

<Combobox name="fruit" label="Fruit">
  <ComboboxSearchField placeholder="Search fruit..." />
  <ComboboxListBox>
    <ComboboxItem id="apple">Apple</ComboboxItem>
    <ComboboxItem id="banana">Banana</ComboboxItem>
    <ComboboxItem id="orange">Orange</ComboboxItem>
    ...
  </ComboboxListBox>
</Combobox>

Combobox supports the same validation functions as the other form elements. See the validation documentation for more details.

<Combobox
  className="w-full"
  name="country"
  label="Country"
  validate={(value) => {
    if (!value) {
      return 'Please select a country';
    }
  }}
  isRequired
>
  <ComboboxSearchField placeholder="Search country..." />
  <ComboboxListBox>
    <ComboboxItem id="us">United States</ComboboxItem>
    <ComboboxItem id="gb">United Kingdom</ComboboxItem>
    <ComboboxItem id="ca">Canada</ComboboxItem>
    <ComboboxItem id="au">Australia</ComboboxItem>
  </ComboboxListBox>
</Combobox>

To group options, you can use the ComboboxSection component.

Country (Required)

<Combobox>
  <ComboboxSearchField placeholder="Search country..." />
  <ComboboxListBox>
    <ComboboxSection title="Europe">
      <ComboboxItem id="at">Austria</ComboboxItem>
      <ComboboxItem id="de">Germany</ComboboxItem>
      <ComboboxItem id="fr">France</ComboboxItem>
    </ComboboxSection>
    <ComboboxSection title="Asia">
      <ComboboxItem id="cn">China</ComboboxItem>
      <ComboboxItem id="jp">Japan</ComboboxItem>
      <ComboboxItem id="in">India</ComboboxItem>
    </ComboboxSection>
  </ComboboxListBox>
</Combobox>

`<Combobox />`

Here are the props for the Combobox component that are also used on the Select. For more details check the documentation.

Prop	Type	Description
`label`	`ReactNode`	The label of the combobox.
`description`	`ReactNode`	The description of the combobox.
`errorMessage`	`string`	The error message to display when the combobox is invalid.
`placeholder`	`string`	The text to display when no option is selected.
`isRequired`	`boolean`	Whether the combobox is required.
`isInvalid`	`boolean`	Whether the combobox is invalid.
`isDisabled`	`boolean`	Whether the combobox is disabled.
`validate`	`(value: Key) => string \| undefined`	The validation function to use for the combobox.
`defaultSelectedKey`	`string`	The id of the item selected by default.
`selectedKey`	`string`	The id of the currently selected item (controlled).
`onSelectionChange`	`(key: Key) => void`	Handler called when the selected item changes.
`name`	`string`	The name of the combobox submitted with form data.
`items`	`Iterable<T>`	Item objects to render dynamically using a render function.
`children`	`ReactNode \| ((item: T) => ReactNode)`	The combobox items, or a render function for dynamic items.

Additional props on the Comobobox that target the Aria-Autocomplete can be passed as comboboxProps to further customize the behaviour of the Combobox.

Prop	Type	Description
`filter`	`function`	The filtering behaviour. Default: `contains` from `react-aria-components` that returns whether a string contains a given substring.
`disableVirtualFocus`	`boolean`	Disable virtual focus.
`disableAutoFocusFirst`	`boolean`	Disable auto focusing the first item in the collection after a filter is performed.
`inputValue` (controlled)	`string`	The value of the input field (controlled). When this prop is set, the input value will not be updated automatically when an item is selected.
`defaultInputValue`(uncontrolled)	`string`	The default value of the input field.
`onInputChange`	`(value: string) => void`	The handler that is called when the input value changes.

`<ComboboxItem />`

Prop	Type	Description
`id`	`string`	The value submitted with the form for this option.
`children`	`ReactNode`	The display label for this option.
`textValue`	`string`	A plain text label used for typeahead search.

`<ComboboxSection />`

Prop	Type	Description
`title`	`string`	The heading label for the section.
`items`	`Iterable<T>`	Items to render dynamically.
`children`	`ReactNode`	The `ComboboxItem` elements to group.

`<ComboboxSearchField />`

Prop	Type	Description
`placeholder`	`string`	The text to display when the input is empty.
`autoFocus`	`boolean`	Whether the input should be automatically focused. (Default: `true`)
`description`	`ReactNode`	The description of the searchfield.

`<ComboboxListBox />`

The ListBox is a react-aria-component and supports all props from react-aria.

Combobox

Validation

Grouping options

Props

`<Combobox />`

`<ComboboxItem />`

`<ComboboxSection />`

`<ComboboxSearchField />`

`<ComboboxListBox />`