Select

Displays a list of options for the user to pick fromâ€”triggered by a button.

Installation

›pnpm dlx shadcn@latest add @evolphin/select

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Type Definitions

interface SelectProps {
  /** The value of the selected item */
  value?: string;  
SelectProps.value?: string | undefined
The value of the selected item
  /** The default value of the selected item when uncontrolled */
  ?: string;
  /** Event handler called when the value changes */
  ?: (: string) => void;
  /** The open state of the select */
  ?: boolean;
}

Examples

Default

Scrollable

API Reference

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the select.
`defaultValue`	`string`	-	The default value of the select when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`open`	`boolean`	-	The controlled open state of the select.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.

SelectTrigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SelectValue

Prop	Type	Default	Description
`placeholder`	`string`	-	The placeholder text to display when no value is selected.

SelectContent

Prop	Type	Default	Description
`position`	`"item-aligned" \	"popper"`	`"item-aligned"`
`className`	`string`	-	Additional CSS classes

SelectItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.

SelectGroup

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SelectLabel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SelectSeparator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Select

On this page