Combobox
Combobox are used to select a single value from a list of options with search functionality. It supports single select and multiple select. It also supports object as data source. Below is a complete example of a select component.
import { Combobox, Form } from '@fluid-design/fluid-ui';function Example() { const cars = [ 'Audi', 'BMW', 'Chevrolet', 'Dodge', 'Ford', 'Honda', 'Toyota', 'Tesla', 'Volkswagen', ]; return ( <Form onSubmit={() => null} initialValues={{ car: '', }} > <Combobox name='car' list={cars} label='Search a car' /> </Form> );}
Prop | Default | Description |
---|---|---|
name | String Name of the field. | |
list | Array List of options. | |
listClassName | String Class name of the list. | |
buttonClassName | String Class name of the button. | |
labelClassName | String Class name of the label. | |
inputClassName | String Class name of the input. | |
itemClassName | String Class name of the input item. | |
selectedItemsClassName | String Class name of the selected items container. | |
className | String Class name of the select. | |
placeholder | String Placeholder of the select. | |
description | String Description of the select. | |
disabled | false | Boolean If |
disabledKey | String Key of the item in the list that should be disabled. | |
itemKey | String Key of the item in the list. | |
multiple | false | Boolean | Number If |
label | String Label of the select. | |
hasEmptyOption | false | Boolean If |
emptyOptionText | '' | String Text of the empty option. |