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 Component Props
Prop	Type	Values	Description
defaultValue	string	-	The initial selected value of the select component
disabled	boolean	true \| false (default)	Determines if the select is disabled
className	string	-	Additional CSS classes for custom styling
position	string	item-aligned \| popper (default)	Positioning strategy for the select dropdown
...props	any	-	Additional HTML attributes for the select component

Select Subcomponents
Component	Prop	Type	Values	Description
Select.Trigger	disabled	boolean	true \| false (default)	Determines if the trigger is disabled
Select.Content	position	string	popper (default) \| item-aligned	Positioning strategy for the content
Select.Item	disabled	boolean	true \| false (default)	Determines if the item is disabled
Select.Item	value	string	-	Value of the select item
Select.Label	as	string	-	Specifies the element type for the label
Select.Separator	-	-	-	Used to separate items within the select component
Select.ScrollUpButton	-	-	-	Button to scroll up in the list
Select.ScrollDownButton	-	-	-	Button to scroll down in the list