Select
Displays a list of options for the user to pick from — triggered by a button. Built with Zeego .
Usage
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectItemIcon,
SelectItemImage,
SelectItemSubtitle,
SelectItemTitle,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const [selectedValue, setSelectedValue] = React.useState<string | null>(null);
const options = [
{label: "Apple", value: "apple"},
{label: "Banana", value: "banana"},
{label: "Orange", value: "orange"},
];
const selectedOption = options.find((opt) => opt.value === selectedValue);
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit">
{selectedOption && selectedOption.label}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem key="apple" onSelect={() => setSelectedValue("apple")}>
<SelectItemTitle>Apple</SelectItemTitle>
</SelectItem>
<SelectItem key="banana" onSelect={() => setSelectedValue("banana")}>
<SelectItemTitle>Banana</SelectItemTitle>
</SelectItem>
<SelectItem key="orange" onSelect={() => setSelectedValue("orange")}>
<SelectItemTitle>Orange</SelectItemTitle>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>;Components
Select
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state of the select. |
onOpenChange | (isOpen: boolean) => void | - | Callback function called when the select open state changes. |
Also extends all Zeego DropdownMenu.Root component props.
SelectTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Sets the size of the select trigger. Controls height, padding, and text size. |
className | string | - | Additional CSS classes to apply to the select trigger. |
baseClassName | string | - | Custom tailwind classes to apply to the base select trigger component. Takes priority over className prop. |
Also extends all Zeego DropdownMenu.Trigger component props.
SelectValue
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | - | Placeholder text to display when no value is selected. |
children | React.ReactNode | - | The selected value content to display. |
SelectContent
| Prop | Type | Default | Description |
|---|---|---|---|
position | "popper" | "item-aligned" | "popper" | Position strategy for the select content. |
align | "start" | "center" | "end" | "center" | Alignment of the select content relative to the trigger. |
className | string | - | Additional CSS classes to apply to the select content. |
baseClassName | string | - | Custom tailwind classes to apply to the base select content component. Takes priority over className prop. |
Also extends all Zeego DropdownMenu.Content component props.
SelectGroup
Used to group related select items together.
Extends all Zeego DropdownMenu.Group component props.
SelectLabel
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the select label. |
baseClassName | string | - | Custom tailwind classes to apply to the base select label component. Takes priority over className prop. |
Also extends all Zeego DropdownMenu.Label component props.
SelectItem
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the select item. |
baseClassName | string | - | Custom tailwind classes to apply to the base select item component. Takes priority over className prop. |
Also extends all Zeego DropdownMenu.Item component props.
SelectSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the select separator. |
baseClassName | string | - | Custom tailwind classes to apply to the base select separator component. Takes priority over className prop. |
Also extends all Zeego DropdownMenu.Separator component props.
SelectItemTitle
Used to provide the title text for select items.
Extends all Zeego DropdownMenu.ItemTitle component props.
SelectItemSubtitle
Used to provide subtitle text for select items.
Extends all Zeego DropdownMenu.ItemSubtitle component props.
SelectItemIcon
Used to provide icons for select items.
Extends all Zeego DropdownMenu.ItemIcon component props.
SelectItemImage
Used to provide images for select items.
Extends all Zeego DropdownMenu.ItemImage component props.
Styling
SelectTrigger Classes
Sizes:
default(default) - Standard trigger size:h-9 px-3 py-2sm- Small trigger size:h-8 px-2 py-1 text-xs
Base Classes:
focus:ring-ring data-[placeholder]:text-muted-foreground flex flex-row h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-hidden focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:opacity-50
SelectContent Classes
Position Variants:
popper- Uses popper positioning with offset transformsitem-aligned- Aligns content with selected item
Base Classes:
bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md
SelectLabel Classes
Base Classes: px-2 py-1.5 text-sm font-medium flex flex-row
SelectItem Classes
Base Classes:
focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
SelectSeparator Classes
Base Classes: bg-muted -mx-1 my-1 h-px flex flex-row