Skip to main content

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.

main.jsx
food.ts
reservation-time.ts
states.ts
Copy

import { Combobox, Form, SubmitButton } from '@fluid-design/fluid-ui';
import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { useState } from 'react';
import * as Yup from 'yup';
function Example() {
const [isSubmitted, setIsSubmitted] = useState(false);
const validationSchema = Yup.object().shape({
state: Yup.object().required('State is required'),
reservationTime: Yup.string().required('Reservation time is required'),
food: Yup.array().min(1, 'You must select at least one food'),
});
return (
<Form
onSubmit={(values, { setSubmitting }) => {
present('Order submitted!');
setTimeout(() => {
setSubmitting(false);
setIsSubmitted(true);
setTimeout(() => {
setIsSubmitted(false);
}, 2000);
}, 2000);
}}
initialValues={{
state: states[5],
reservationTime: '',
food: [],
}}
validationSchema={validationSchema}
>
<Combobox
itemKey='name'
list={states}
name='state'
autoComplete='state'
/>
<Combobox
name='reservationTime'
label='Reservation Time'
placeholder='Select a time'
list={reservationTime}
hasEmptyOption
emptyOptionText='Unspecified'
/>
<Combobox
name='food'
itemKey='name'
disabledKey='unavailable'
list={food}
label="What's on the menu? (max 4 items)"
placeholder='Select your favorites'
multiple={4}
/>
<SubmitButton
className='mt-32 w-full btn-light-primary dark:btn-bold-primary'
label='Order'
isLoaded={isSubmitted}
iconStart={ShoppingCartIcon}
loadedOptions={{
text: 'Order submitted!',
}}
/>
</Form>
);
}

Basic example

Basic example

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>
);
}

Component API

PropDefaultDescription
nameString

Name of the field.

listArray

List of options.

listClassNameString

Class name of the list.

buttonClassNameString

Class name of the button.

labelClassNameString

Class name of the label.

inputClassNameString

Class name of the input.

itemClassNameString

Class name of the input item.

selectedItemsClassNameString

Class name of the selected items container.

classNameString

Class name of the select.

placeholderString

Placeholder of the select.

descriptionString

Description of the select.

disabledfalseBoolean

If true, disables the select.

disabledKeyString

Key of the item in the list that should be disabled.

itemKeyString

Key of the item in the list.

multiplefalseBoolean | Number

If true, allows multiple selections. If a number, sets a maximum number of selections.

labelString

Label of the select.

hasEmptyOptionfalseBoolean

If true, adds an empty option.

emptyOptionText''String

Text of the empty option.