Select

A neumorphic select component that displays a list of options for the user to pick from, built on top of Base UI.

Installation

$ npx shadcn@latest add "/r/select.json"

Usage

Examples

Sizes

The select component is available in three sizes: sm, md, and lg.

Props

Select

Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg"`	`"md"`	The size of the select trigger.
items	`{ value: string; label: string }[]`	-	Array of items for value-to-label mapping. Required for displaying labels in the trigger.
defaultValue	`string`	-	The default value of the select.
value	`string`	-	The controlled value of the select.
onValueChange	`(value: string) => void`	-	Event handler called when the value changes.
open	`boolean`	-	The controlled open state of the select.
onOpenChange	`(open: boolean) => void`	-	Event handler called when the open state changes.
disabled	`boolean`	`false`	Whether the select is disabled.

SelectTrigger

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes to apply to the trigger.

SelectContent

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes to apply to the content.

SelectItem

Prop	Type	Default	Description
value	`string`	-	The value of the item.
disabled	`boolean`	`false`	Whether the item is disabled.
className	`string`	-	Additional CSS classes to apply to the item.