Select

A dropdown component that allows users to select from a list of options.

Usage


import { Select } from "@rhinolabs/ui"
 
export default function SelectDemo() {
  return (
    <Select>
      <Select.Trigger className="w-[180px]">
        <Select.Value placeholder="Select a fruit" />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          <Select.Item value="apple">Apple</Select.Item>
          <Select.Item value="banana">Banana</Select.Item>
          <Select.Item value="orange">Orange</Select.Item>
        </Select.Group>
      </Select.Content>
    </Select>
  )
}

Examples

With Groups

Grouped select options with labels.


<Select>
  <Select.Trigger className="w-[200px]">
    <Select.Value placeholder="Select a timezone" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>North America</Select.Label>
      <Select.Item value="est">Eastern Time</Select.Item>
      <Select.Item value="cst">Central Time</Select.Item>
      <Select.Item value="pst">Pacific Time</Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.Label>Europe</Select.Label>
      <Select.Item value="gmt">GMT</Select.Item>
      <Select.Item value="cet">Central European Time</Select.Item>
    </Select.Group>
  </Select.Content>
</Select>

With Disabled Options

Select with some disabled options.


<Select>
  <Select.Trigger className="w-[180px]">
    <Select.Value placeholder="Select a plan" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="free">Free</Select.Item>
    <Select.Item value="pro">Pro</Select.Item>
    <Select.Item value="enterprise" disabled>
      Enterprise
    </Select.Item>
  </Select.Content>
</Select>

Props

Select

Prop	Type	Description
`value`	`string`	The controlled value
`defaultValue`	`string`	The default value
`onValueChange`	`(value: string) => void`	Value change callback
`disabled`	`boolean`	Whether the select is disabled

SelectTrigger

Prop	Type	Description
`asChild`	`boolean`	Use a custom trigger element

SelectItem

Prop	Type	Description
`value`	`string`	The value of the item
`disabled`	`boolean`	Whether the item is disabled

Design Considerations

Use clear option labels
Group related options
Show selected state clearly
Consider mobile interactions
Handle long option text

Accessibility

Supports keyboard navigation
Maintains focus management
Provides ARIA labels
Announces selection changes
Handles screen readers