TaylorUI - The Functn UI Kit

A dropdown list of options.

A select displays a collapsible list of options and allows a user to choose one.

Fruit

<Select name="fruit" label="Fruit" placeholder="Select a fruit">
  <SelectItem id="apple">Apple</SelectItem>
  <SelectItem id="banana">Banana</SelectItem>
  <SelectItem id="orange">Orange</SelectItem>
</Select>

Each option in the select is rendered with a SelectItem component. The id prop is used as the value submitted with the form.

<Select name="fruit" label="Fruit">
  <SelectItem id="apple">Apple</SelectItem>
  <SelectItem id="banana">Banana</SelectItem>
  <SelectItem id="orange">Orange</SelectItem>
</Select>

Options can be grouped into sections using the SelectSection component. Each section accepts a title prop for a visual group header.

Food

<Select name="food" label="Food">
  <SelectSection title="Fruit">
    <SelectItem id="apple">Apple</SelectItem>
    <SelectItem id="banana">Banana</SelectItem>
    <SelectItem id="orange">Orange</SelectItem>
  </SelectSection>
  <SelectSection title="Vegetable">
    <SelectItem id="carrot">Carrot</SelectItem>
    <SelectItem id="broccoli">Broccoli</SelectItem>
    <SelectItem id="spinach">Spinach</SelectItem>
  </SelectSection>
</Select>

Select supports the same validation functions as the other form elements. See the validation documentation for more details.

<Select
  name="country"
  label="Country"
  validate={(value) => {
    if (!value) {
      return 'Please select a country';
    }
  }}
  isRequired
>
  <SelectItem id="us">United States</SelectItem>
  <SelectItem id="gb">United Kingdom</SelectItem>
  <SelectItem id="ca">Canada</SelectItem>
  <SelectItem id="au">Australia</SelectItem>
</Select>

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

TimezoneSelect the timezone for your account

<Select
  name="timezone"
  label="Timezone"
  description="Select the timezone for your account"
>
  <SelectItem id="utc">UTC</SelectItem>
  <SelectItem id="est">Eastern Time</SelectItem>
  <SelectItem id="pst">Pacific Time</SelectItem>
</Select>

You can set an icon

Favourite Wizard

<Select
  name="favourite-wizard"
  label="Favourite Wizard"
  icon={<RiMagicLine size={18} />}
>
  <SelectItem id="harry-potter">Harry Potter</SelectItem>
  <SelectItem id="gandalf">Gandalf</SelectItem>
  <SelectItem id="merlin">Merlin</SelectItem>
</Select>

You can set the default selected option with the defaultSelectedKey prop.

Fruit

<Select name="fruit" label="Fruit" defaultSelectedKey="banana">
  <SelectItem id="apple">Apple</SelectItem>
  <SelectItem id="banana">Banana</SelectItem>
  <SelectItem id="orange">Orange</SelectItem>
</Select>

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

Country (Required)Please select your country

<Select
  name="country"
  label="Country"
  description="Please select your country"
  isRequired
>
  <SelectItem id="us">United States</SelectItem>
  <SelectItem id="gb">United Kingdom</SelectItem>
  <SelectItem id="ca">Canada</SelectItem>
</Select>

When rendered inside a form, the select 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.

Country (Required)Please select a country

<Select
  name="country"
  label="Country"
  errorMessage="Please select a country"
  isInvalid
  isRequired
>
  <SelectItem id="us">United States</SelectItem>
  <SelectItem id="gb">United Kingdom</SelectItem>
  <SelectItem id="ca">Canada</SelectItem>
</Select>

A select can be disabled by setting the isDisabled prop to true.

Fruit

<Select name="fruit" label="Fruit" defaultSelectedKey="apple" isDisabled>
  <SelectItem id="apple">Apple</SelectItem>
  <SelectItem id="banana">Banana</SelectItem>
  <SelectItem id="orange">Orange</SelectItem>
</Select>

Prop	Type	Description
`label`	`ReactNode`	The label of the select.
`description`	`ReactNode`	The description of the select.
`errorMessage`	`string`	The error message to display when the select is invalid.
`placeholder`	`string`	The text to display when no option is selected.
`isRequired`	`boolean`	Whether the select is required.
`isInvalid`	`boolean`	Whether the select is invalid.
`isDisabled`	`boolean`	Whether the select is disabled.
`validate`	`(value: Key) => string \| undefined`	The validation function to use for the select.
`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 select submitted with form data.
`items`	`Iterable<T>`	Item objects to render dynamically using a render function.
`children`	`ReactNode \| ((item: T) => ReactNode)`	The select items, or a render function for dynamic items.

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.

Prop	Type	Description
`title`	`string`	The heading label for the section.
`items`	`Iterable<T>`	Items to render dynamically.
`children`	`ReactNode`	The `SelectItem` elements to group.

Select

SelectItem

SelectSection

Validation

Other props

description

icon

defaultSelectedKey

isRequired

isInvalid

isDisabled

Props

Select

SelectItem

SelectSection