InstallationCopy Anchor Link

npx vayu-ui-cli@latest add select

UsageCopy Anchor Link

Select and TextInput share field heights: sm is 36px, md is 44px, and lg is 52px at the default root font size. Set size and disabled on Select.Root. Disabled fields use the same muted appearance as TextInput and cannot open, search, select, or remove chips. Multi-select keeps the same minimum height and grows when chips wrap.

AnatomyCopy Anchor Link

import { Select } from 'vayu-ui';

{
  /* Basic Structure */
}
<Select.Root value={value} onValueChange={setValue} label="Label">
  <Select.Trigger placeholder="Choose..." />
  <Select.Content>
    <Select.List>
      <Select.Item value="opt1">Option 1</Select.Item>
      <Select.Item value="opt2">Option 2</Select.Item>
    </Select.List>
    <Select.Loading />
    <Select.SearchHint />
    <Select.AsyncOptions />
    <Select.CreateButton />
    <Select.NotFound>No results</Select.NotFound>
    <Select.Error type="search" />
    <Select.Footer>Footer content</Select.Footer>
  </Select.Content>
</Select.Root>;

• Select.Root — Root container. Manages selection state, search, and provides context to children.
• Select.Trigger — Button with search input and multi-value chips. Toggles the dropdown open/close.
• Select.Content — Portal-based dropdown with automatic positioning above or below the trigger.
• Select.List — Hybrid renderer for static items and async options. Wraps Select.Item elements.
• Select.Item — Individual selectable option with check icon for selected state.
• Select.AsyncOptions — Renders options returned from async search results.
• Select.CreateButton — Button to create a new option when creatable is enabled.
• Select.Loading — Loading spinner shown during async search.
• Select.SearchHint — Hint text shown when search input is shorter than minSearchLength.
• Select.NotFound — Empty state displayed when no options match the search.
• Select.Error — Error message for failed search or create operations.
• Select.Footer — Optional footer content at the bottom of the dropdown.

AccessibilityCopy Anchor Link

• Keyboard Support:
  • Enter / Space — Select the focused option or open the dropdown.
  • ArrowDown — Move focus to the next option. Wraps to first. Opens dropdown if closed.
  • ArrowUp — Move focus to the previous option. Wraps to last. Opens dropdown if closed.
  • Escape — Close the dropdown and return focus to the trigger input.
  • Tab — Move focus between the trigger input and options. Shift+Tab for reverse.
  • Backspace — Remove the last selected value in multi-select mode when search input is empty.
• ARIA Attributes:
  • role="listbox" on Select.Content.
  • role="option" on each Select.Item and Select.CreateButton.
  • aria-selected on Select.Item reflects the selected state.
  • data-disabled on Select.Item when the option is disabled.
  • Label linked to input via htmlFor and generated id.
• Focus Behavior:
  • Clicking the trigger focuses the search input and opens the dropdown.
  • Arrow keys move focus between options within the listbox.
  • Closing the dropdown returns focus to the trigger input.
  • Programmatic focus is tracked to prevent unwanted dropdown open on refocus.

Screen reader behaviorCopy Anchor Link

When a user focuses the select trigger, the screen reader announces the label and the currently selected value or placeholder. When the dropdown opens, the listbox role is announced along with the number of available options. Each option is announced with its label and selected state via aria-selected. Disabled options are announced as unavailable. When no results are found, the Select.NotFound content is announced. In multi-select mode, selecting or removing values is announced. The Select.Loading and Select.SearchHint states are announced when they appear during async search.

Component Folder StructureCopy Anchor Link

Select/
├── Select.tsx              # Root component with context provider and state management
├── SelectTrigger.tsx       # Trigger with search input and multi-value chips
├── SelectContent.tsx       # Portal-based dropdown with auto-positioning
├── Selectitem.tsx          # Individual selectable option
├── SelectCreateButton.tsx  # Creatable option button with validation
├── SelectOptionList.tsx    # Static and async list renderers
├── SelectStates.tsx        # Loading, NotFound, SearchHint, Error, Footer states
├── types.ts                # TypeScript type definitions
├── index.ts                # Re-exports all components and types
└── README.md               # Component usage reference

PropsCopy Anchor Link

Select.RootCopy Anchor Link

Select.TriggerCopy Anchor Link

Select.ContentCopy Anchor Link

Select.ItemCopy Anchor Link

Select.ListCopy Anchor Link

Select.AsyncOptionsCopy Anchor Link

Select.CreateButtonCopy Anchor Link

Select.LoadingCopy Anchor Link

Select.NotFoundCopy Anchor Link

Select.SearchHintCopy Anchor Link

Select.ErrorCopy Anchor Link

Select.FooterCopy Anchor Link