Select

One choice out of a list, in a panel that opens where there is room.

Default

A trigger, a panel, three entries. The placeholder shows until something is chosen.

The trigger reads out the current choice, the arrow keys move through the list, typing jumps to a matching entry, and the panel flips above the trigger when the bottom of the window is too close. It never grows taller than the space it has.

Installation

npx philcn@latest add select

The file is written into your project. It is yours from then on — change it as you like.

Examples

Groups and separators

Headings for long lists, and an entry that cannot be chosen.

Controlled

The choice lives in your state, so the rest of the page can react to it.

Chosen: ts

Props

Prop	Type	What it does
Select.value	string	Controlled: the chosen value is yours to hold.
Select.defaultValue	string	Uncontrolled: what is chosen at the start.
Select.onValueChange	((value: string) => void)	Called with the new value on every choice.
Select.disabled	boolean	Turns the whole control off.
Select.name	string	The name the value is submitted under in a form.
SelectItem.value *	string	What this entry stands for. Required.

Types are read from the library itself, so this table cannot describe an option the code no longer has.

Worth knowing

SelectScrollUpButton and SelectScrollDownButton exist so blocks pasted from shadcn compile, but they render nothing: the panel already scrolls on its own and never outgrows the window.