Select

The Select component provides you with dropdown menus and choices.

Live Examples

Storybook: components-form-select--default

Storybook: components-form-select--variants

Storybook: components-form-select--form-example

Code Examples

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nostromo/ui-core'
 
export default function SelectExample() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
        <SelectItem value="option3">Option 3</SelectItem>
      </SelectContent>
    </Select>
  )
}

With Label

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Label } from '@nostromo/ui-core'
 
export default function SelectWithLabel() {
  return (
    <div className="space-y-2">
      <Label htmlFor="country">Country</Label>
      <Select>
        <SelectTrigger id="country">
          <SelectValue placeholder="Select country" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="dk">Denmark</SelectItem>
          <SelectItem value="se">Sweden</SelectItem>
          <SelectItem value="no">Norway</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Accessibility

Keyboard Navigation

Arrow Keys: Navigate through options
Enter/Space: Selects the focused option
Escape: Closes the dropdown
Tab: Moves focus to the next element
Home/End: Moves to first/last option

ARIA Attributes

role="combobox": Identifies the select as a combobox
aria-expanded: Indicates if the dropdown is open
aria-haspopup: Indicates the presence of a popup
aria-activedescendant: References the currently focused option
aria-labelledby: References the label element

Focus Management

Focus trap: Prevents focus from escaping the dropdown
Focus restoration: Returns focus to the trigger when closed
Focus indicators: Clear visual focus states

Screen Reader Support

Option announcements: Selected options are announced
State changes: Open/close states are announced
Navigation hints: Keyboard navigation is described

Examples

// Accessible select with proper labeling
<Select>
  <SelectTrigger aria-labelledby="country-label">
    <SelectValue placeholder="Select a country" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us" aria-describedby="us-description">
      United States
    </SelectItem>
    <SelectItem value="ca" aria-describedby="ca-description">
      Canada
    </SelectItem>
  </SelectContent>
</Select>
<label id="country-label" className="sr-only">
  Select your country
</label>

Props

Prop	Type	Default	Description
`value`	`string`	-	Selected value
`onValueChange`	`function`	-	Change handler
`disabled`	`boolean`	`false`	Whether select is disabled

Switch Label