Select

Keyboard-friendly listbox with a glowing popover and typeahead.

Region

Where your functions run. Pick the one closest to your database.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/select.json

Usage#

import { Select } from "@/components/ui/select"

<Select
  label="Region"
  defaultValue="fra1"
  options={[
    { value: "fra1", label: "Frankfurt" },
    { value: "iad1", label: "Washington, D.C." },
  ]}
/>

Examples#

In a form

Give it a name and the value submits with the form through a hidden input.

Sizes

Error and disabled

Timezone

Pick a timezone so the weekly report lands on Monday morning.

Plan

Only workspace owners can change the plan.

API reference#

Select

Also accepts native button attributes, and the ref points at the trigger. className and style go to the trigger.

Prop	Type	Default
`options`	`SelectOption[]` The choices, in order.	`—`
`value`	`string` Controlled value.	`—`
`defaultValue`	`string` Initial value when uncontrolled.	`—`
`onValueChange`	`(value: string) => void` Called when the user picks a different option.	`—`
`placeholder`	`ReactNode` Shown while nothing is selected.	`"Select…"`
`name`	`string` Submits the value with a surrounding form.	`—`
`label`	`ReactNode` Visible label. Names both the trigger and the list.	`—`
`description`	`ReactNode` Helper text under the trigger.	`—`
`error`	`ReactNode` Red invalid state and message. Replaces description. Pass true for the state without a message.	`—`
`disabled`	`boolean` Blocks opening and leaves the value out of form data.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`
`size`	`"sm" \| "md" \| "lg"` Trigger height and option padding.	`"md"`
`containerClassName`	`string` Classes for the outer block with the label, list and message.	`—`

SelectOption

Prop	Type	Default
`value`	`string` Unique value, also the React key.	`—`
`label`	`string` Shown in the list and the trigger. Typeahead matches against it.	`—`
`description`	`string` Second line, shown in the list only.	`—`
`icon`	`ReactNode` Shown before the label in the list and the trigger.	`—`
`disabled`	`boolean` Visible but can't be picked.	`false`

Accessibility#

Follows the WAI-ARIA select-only combobox pattern: focus stays on the trigger and aria-activedescendant tracks the highlighted option.
Enter, Space and the arrow keys open the list. Arrows move, Home and End jump, Enter or Space picks, Escape and Tab close.
Typing letters jumps to the first matching option. Pressing the same letter again cycles through matches.
Without a visible label, pass aria-label. It names both the trigger and the list.
The list is positioned below the trigger, so an overflow-hidden ancestor will clip it.

PreviousTextarea Next Checkbox