Select

Displays a list of options for the user to pick from—triggered by a button.

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add select

Anatomy

Import the component and pass the required props.

import {
  Select,
  SelectContent,
  SelectValue,
  SelectIndicator,
  SelectItem,
  SelectTrigger
} from "@/registry/core/select";

export default function SelectExample() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue />
        <SelectIndicator />
      </SelectTrigger>
      <SelectContent>
        <SelectItem id="apple">Apple</SelectItem>
        <SelectItem id="banana">Banana</SelectItem>
        <SelectItem id="orange">Orange</SelectItem>
      </SelectContent>
    </Select>
  );
}

Examples

With label and description

You can add a label and description to the select component using SelectLabel and SelectDescription.

Favorite AnimalChoose an animal that you like the most.

Sections

You can group options into sections using SelectSection and SelectHeader. Use SelectSeparator to visually separate sections.

Controlled

You can control the value of the select component using the value and onChange props.

Selected animal: No animal selected

Multiple select

The Select component supports multiple selection using the selectionMode="multiple" prop. You can control the selection using value (an Iterable<Key> or Set<Key>) and onChange.

Select Fruits

Custom indicator

You can customize the selection indicator by passing a child to SelectIndicator.

Required

The isRequired prop can be used to mark the select as required. You can use SelectErrorMessage to display validation errors.

Custom values

You can pass custom content to SelectItem to create more complex menu items.

Controlled multiple

A controlled version of the multiple select example.

Programming Frameworks

Selected count: 1

Disabled

You can disable the entire select component or individual items using the isDisabled prop.

Disabled Item

Disabled Select

API Reference

Select

Prop	Type	Default	Description
`selectionMode`	`'single' \| 'multiple'`	`'single'`	Whether single or multiple selection is enabled.
`value`	`Key \| Iterable<Key>`	-	The currently selected key(s) (controlled).
`onChange`	`(value: any) => void`	-	Handler that is called when the value changes.
`label`	`string`	-	The label for the select (convenience prop).
`description`	`string`	-	The description for the select (convenience prop).
`errorMessage`	`string \| ((validation: any) => string)`	-	The error message for the select (convenience prop).
`items`	`Iterable<T>`	-	The items to display in the select.
`name`	`string`	-	The name of the input element, used when submitting an HTML form.
`isDisabled`	`boolean`	-	Whether the select is disabled.
`isInvalid`	`boolean`	-	Whether the select is in an invalid state.
`isRequired`	`boolean`	-	Whether the select requires a value to be selected.
`className`	`string`	-	Additional CSS classes to apply to the select container.

The Key type supports string and number. See React Aria's Select for more details.

State Attributes

The Select component supports the following state attributes on its container:

Attribute	Description
`data-focused`	Whether the select is currently focused.
`data-open`	Whether the select is currently open.
`data-invalid`	Whether the select is in an invalid state.
`data-disabled`	Whether the select is disabled.
`data-required`	Whether the select is required.

SelectTrigger

Prop	Type	Default	Description
`isInvalid`	`boolean`	-	Whether the trigger is in an invalid state.
`className`	`string`	-	Additional CSS classes to apply to the trigger button.

SelectLabel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the label.

SelectDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the description.

SelectErrorMessage

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the error message.

SelectContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the popover content.

SelectItem

Prop	Type	Default	Description
`id`	`string \| number`	-	The unique identifier for the item.
`textValue`	`string`	-	A text representation of the item's content, used for keyboard navigation and accessibility.
`isDisabled`	`boolean`	-	Whether the item is disabled.
`className`	`string`	-	Additional CSS classes to apply to the item.

SelectValue

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the selected value output.

SelectIndicator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the dropdown indicator.
`children`	`node`	-	Custom indicator icon or element. Defaults to `<ChevronDown />`.

SelectLabel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the label.

SelectDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the description.

SelectErrorMessage

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the error message.

SelectContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the popover content.

SelectSection

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the section container.

SelectHeader

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the header.

SelectSeparator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the separator.

See React Aria's Select for more details.

Accessibility

Keyboard Navigation: Supports arrow keys to navigate options, Enter/Space to select, and Escape to close the menu.
Screen Reader Support: Uses ARIA attributes (e.g., aria-expanded, aria-activedescendant) to provide context to screen readers.
Labeling: Supports labeling via aria-label or aria-labelledby.

Select

CLI

Manual

On this page