Select

The Select component provides you with dropdown menus and choices.

Import

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nostromo/ui-core'
// or
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nostromo/ui-core/select'

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nostromo/ui-core'
 
export default function Example() {
  const [value, setValue] = React.useState('')
  
  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
      </SelectContent>
    </Select>
  )
}

Live Examples

With Label

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>

Best Practices

Do ✅

• Always provide a SelectValue with placeholder
• Use Label component for form integration
• Provide unique value props for each SelectItem
• Use controlled mode (value + onValueChange) for form libraries
• Handle disabled states appropriately

Don't ❌

• Don't forget to handle form submission with name prop
• Don't use Select for navigation (use links instead)
• Don't create too many options (consider search/filtering)
• Don't forget keyboard navigation support

Props

Select

SelectTrigger

SelectValue

SelectContent

SelectItem