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.

Because the Select is controlled, the chosen value lives in your component state — which means you can use it anywhere else in the render, not just inside the dropdown. The example below holds the value in useState and shows it back to the user under the field. There is no internal state to query and no ref to read; the value you passed in is the single source of truth.

This matters when the selection drives the rest of the UI: a sort control that reorders a list, a filter that narrows a table, a theme picker that swaps tokens. The onChange callback fires with the new value the instant an option is clicked, so any derived rendering updates in the same pass. Set the initial state to a real value rather than an empty string when you want a default pre-selected — the trigger will render that option's label immediately.

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.