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