Select

Select are used to select a single value from a list of options. 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 { Form, Select, 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 }) => {
        setTimeout(() => {
          setSubmitting(false);
          setIsSubmitted(true);
          setTimeout(() => {
            setIsSubmitted(false);
          }, 2000);
        }, 2000);
      }}
      initialValues={{
        state: states[3],
        reservationTime: '',
        food: [],
      }}
      validationSchema={validationSchema}
    >
      <Select itemKey='name' list={states} name='state' autoComplete='state' />
      <Select
        name='reservationTime'
        label='Reservation Time'
        placeholder='Select a time'
        list={reservationTime}
        hasEmptyOption
        emptyOptionText='Unspecified'
      />
      <Select
        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='w-full btn-light-primary dark:btn-bold-primary'
        label='Order'
        isLoaded={isSubmitted}
        iconStart={ShoppingCartIcon}
        loadedOptions={{
          text: 'Order submitted!',
        }}
      />
    </Form>
  );
}

Basic example

import { Form, Select } from '@fluid-design/fluid-ui';
function Example() {
  const cars = [
    'Audi',
    'BMW',
    'Chevrolet',
    'Dodge',
    'Ford',
    'Honda',
    'Toyota',
    'Tesla',
    'Volkswagen',
  ];
  return (
    <Form
      onSubmit={() => null}
      initialValues={{
        car: '',
      }}
    >
      <Select name='car' list={cars} label='Select a car' />
    </Form>
  );
}

Multiple select

To allow multiple selections, pass multiple prop, and pass an array of values to value prop. If you want to set a maximum number of selections, you can do so by setting multiple prop to a number.

import { Form, Select } from '@fluid-design/fluid-ui';
function Example() {
  const cars = [
    'Audi',
    'BMW',
    'Chevrolet',
    'Dodge',
    'Ford',
    'Honda',
    'Toyota',
    'Tesla',
    'Volkswagen',
  ];
  return (
    <Form
      onSubmit={() => null}
      initialValues={{
        cars: [],
      }}
    >
      <Select name='cars' list={cars} label='Select cars' multiple />
    </Form>
  );
}

Empty option

If you want to have an empty option, you can add hasEmptyOption prop. You can also customize the empty option by passing a string to emptyOptionText prop.

<Select
  name='car'
  list={cars}
  label='Select a car'
  hasEmptyOption
  emptyOptionText="I don't have a car"
/>

Custom Components

You can replace Option and SelectedOption components with your own.

Custom Components

import { Form, Select, SubmitButton } from '@fluid-design/fluid-ui';
function Example() {
  return (
    <Form
      onSubmit={() => null}
      initialValues={{
        food: [],
      }}
    >
      <Select
        name='food'
        list={food}
        itemKey='name'
        label="What's on the menu?"
        placeholder='Select as many as you like'
        multiple
        itemClassName='flex flex-wrap'
        rednerOptionItem={({ item, Option }) => (
          <Option
            value={item.name}
            className={({ active, selected, disabled }) =>
              clsxm(
                'flex flex-row items-center justify-start gap-2 px-2 py-1',
                'bg-white',
                active && 'bg-gray-100',
                selected && 'bg-blue-200',
                disabled && 'bg-gray-200'
              )
            }
            disabled={item.available === false}
          >
            {({ active, selected, disabled }) => (
              <>
                <div className='h-4 w-4'>
                  {selected && '✓'}
                  {disabled && '🚫'}
                </div>
                <div className='flex-grow'>{item.name}</div>
              </>
            )}
          </Option>
        )}
        renderSelectedItem={({ item, remove }) => (
          <button
            onClick={remove}
            className='flex flex-row items-center justify-start gap-2 rounded-full bg-primary-200 px-2 py-1'
          >
            <div className='flex-grow text-sm'>{item.name}</div>
            <XMarkIcon className='h-4 w-4' />
          </button>
        )}
      />
    </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.
`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.