Select
Displays a list of options for the user to pick from—triggered by a button.
"use client"
import {
Select,
SelectContent,Usage
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "uilab-core"<Select>
<SelectTrigger className="w-45">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Example
Align Item With Trigger
Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.
Toggle to align the item with the trigger.
"use client"
import * as React from "react"
import {
Field,Groups
Use SelectGroup, SelectLabel, and SelectSeparator to organize items.
Scrollable
A select with many items that scrolls.
"use client"
import {
Select,
SelectContent,Disabled
"use client"
import {
Select,
SelectContent,Invalid
Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.
<Field data-invalid>
<FieldLabel>Fruit</FieldLabel>
<SelectTrigger aria-invalid>
<SelectValue />
</SelectTrigger>
</Field>Please select a fruit.
"use client"
import {
Field,
FieldError,