Select

Select component documentation.

Usage

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
} from "@aqqo/aqqo-ui";

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
    <SelectItem value="3">Option 3</SelectItem>
  </SelectContent>
</Select>

Examples

With label

Select option

<div className="grid w-full max-w-sm items-center gap-2">
  <Label htmlFor="test" id="name">
    Select option
  </Label>
  <Select>
    <SelectTrigger id="test" aria-labelledby={id}>
      <SelectValue placeholder="Select an option" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">Option 1</SelectItem>
      <SelectItem value="2">Option 2</SelectItem>
      <SelectItem value="3">Option 3</SelectItem>
    </SelectContent>
  </Select>
</div>

Disabled

Props

Select wraps Radix Select. Select (Root): Inherits Radix Root (value, onValueChange, disabled, etc.). SelectTrigger: Custom props: className, children. SelectValue: Inherits Radix Value (placeholder). SelectContent: Custom props: className, position (default: "popper"). SelectItem: Custom props: className, value, children. SelectGroup, SelectLabel, SelectSeparator: Inherit Radix equivalents plus className.