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

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

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

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 `true`, disables the select.
`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 `true`, allows multiple selections. If a number, sets a maximum number of selections.
`label`		`String` Label of the select.
`hasEmptyOption`	`false`	`Boolean` If `true`, adds an empty option.
`emptyOptionText`	`''`	`String` Text of the empty option.