React Select Component Examples

The simplest Select: a root, a trigger, and a menu of options. Pass value and onChange to the Select root so it can track the current choice and report changes. Each Select.Option carries a value string; clicking one runs the root's onChange with that value and closes the menu. The Select.Trigger takes a placeholder that shows while nothing is picked, and its children render the label of the current selection.

Drivn does not auto-resolve the label from the value — the component has no options registry — so you look the label up yourself, as the options.find(...) call below does. That keeps the component a thin wrapper with no hidden abstraction. This shape is right for a status field, a category picker, or any control where the choices are known ahead of time. For a list the user needs to search through, reach for the Combobox instead.

Controlled means the value is never hidden inside the component, so it stays available anywhere else in the same render — not only to the dropdown that set it. The snippet below keeps the choice in useState and echoes it back beneath the field, but the same state could just as easily reorder a list, narrow a table, or move a chart range. There is no internal value to query and no ref to read out; what you passed in is what is selected.

onChange fires the moment an option is clicked, and the component closes the menu inside that same callback, so derived rendering lands in one pass rather than two. Two details are worth knowing. Initialise the state with a real option value instead of an empty string when a field should start pre-selected — the trigger renders whatever you hand it as children, so the default shows immediately and the placeholder never appears. And because the root registers a mousedown listener on the document to close on an outside click, clicking away leaves the current value untouched; dismissing the menu is not a way to clear the field. When a field does need clearing, render a reset control beside the Select and set the state back to '' yourself — the Button component has an outline variant that suits that job.

The Select.Trigger renders whatever you pass as its children, so the label is not locked to the option text. You can prefix it, format it, or compose it from other elements. The example below shows a richer trigger that pairs a static prefix with the selected label, so the field reads "Plan: Pro" instead of just "Pro".

When the trigger has no children — nothing picked yet — it falls back to the placeholder and applies the styles.placeholder class (text-muted-foreground) so the empty state reads as muted. Once a value is set, your children render at full contrast. Because the trigger is a native <button>, it also accepts any standard button attribute except onClick, which the component owns to toggle the menu — so disabled, aria-label, and id all flow straight through. Keep the children short; the trigger is a fixed 40-pixel-tall row and long text will truncate against the chevron.

A Select earns its place in any form where one field is a fixed-choice value — a timezone, a role, a notification frequency. Treat it like any other controlled input: hold the value in state, render it inside a labelled row, and read it from state on submit. The Select does not render a hidden native input, so it contributes nothing to FormData — the value you collect comes from your own state.

The example below pairs the Select with a Label and stacks it the way a settings panel would. For a form managed by react-hook-form, register the field through a Controller and feed its field.value and field.onChange straight into the Select root. To group several Select fields with text inputs, the Input component shares the same border-input and rounded-[10px] styling, so the controls line up without extra work.

The Select marks the currently selected option without you writing any conditional class. Inside the Option component, the registry compares each option's value against the root's context value, and when they match it merges styles.selected onto the row. That class is text-primary font-medium, so the chosen option reads in the brand color and a heavier weight while the rest stay default.

Every option is a native <button> carrying styles.option, which gives it a hover:bg-accent background and rounded-lg corners, so pointer feedback is built in. The menu container caps its height at max-h-[200px] and turns on overflow-y-auto, so a long option list scrolls inside the dropdown rather than running off the screen. Because the file is yours after install, restyling the active state is a one-line edit to styles.selected — swap in a background tint or a check icon. The verbatim Option source below shows exactly where the selected class is applied. See the Drivn vs shadcn Select page for how this compares to the Radix-backed recipe.