TaylorUI - The Functn UI Kit

Select an option from a dropdown list and search for options by typing.

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>

A description can be added to the combobox to provide additional information to the user.

FruitSelect the fruit for your account

<Combobox
  name="fruit"
  label="Fruit"
  description="Select the fruit for your account"
>
  <ComboboxItem id="apple">Apple</ComboboxItem>
  <ComboboxItem id="banana">Banana</ComboboxItem>
  <ComboboxItem id="orange">Orange</ComboboxItem>
</Combobox>

You can set an icon

Fruit

<Combobox name="fruit" label="Fruit" icon={<RiAppleLine size={18} />}>
  <ComboboxItem id="apple">Apple</ComboboxItem>
  <ComboboxItem id="banana">Banana</ComboboxItem>
  <ComboboxItem id="orange">Orange</ComboboxItem>
</Combobox>

A combobox can be marked as required by setting the isRequired prop to true.

Fruit (Required)

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

When rendered inside a form, the combobox will automatically enter an invalid state and display the field error message defined by the validation function. However, it is also possible to manually set the invalid state by setting the isInvalid prop to true and passing an errorMessage prop.

Fruit

<Combobox name="fruit" label="Fruit" isInvalid>
  <ComboboxSearchField placeholder="Search fruit..." />
  <ComboboxListBox>
    <ComboboxItem id="apple">Apple</ComboboxItem>
    <ComboboxItem id="banana">Banana</ComboboxItem>
    <ComboboxItem id="orange">Orange</ComboboxItem>
  </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

Other props

description

icon

isRequired

isInvalid

Props

`<Combobox />`

`<ComboboxItem />`

`<ComboboxSection />`

`<ComboboxSearchField />`

`<ComboboxListBox />`