Select

Animated select menu with proximity hover, bordered/borderless variants, optional leading icons, and spring-animated popover.

Installation

npx shadcn@latest add https://www.fluidfunctionalism.com/r/select.json

Basic

Variants

With Icons

Groups

Scrollable List

Error State

Please select a role to continue.

Disabled

API Reference — Select

PropTypeDefaultDescription
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled default value.
onValueChange(value: string) => void—Called when the selected value changes.
disabledbooleanfalseDisables the entire select.
namestring—Name for form submission.
requiredbooleanfalseMarks the select as required in forms.

API Reference — SelectTrigger

PropTypeDefaultDescription
variant"bordered" | "borderless""bordered"Visual style of the trigger.
iconLucideIcon—Optional icon displayed before the value.
placeholderstring"Select…"Text shown when no value is selected.
errorstring—Error message shown below the trigger.

API Reference — SelectItem

PropTypeDefaultDescription
indexnumber—Position index within the content for proximity hover.
valuestring—Unique value for this option.
iconLucideIcon—Optional icon displayed before the label.
disabledbooleanfalseDisables this individual item.