Select

Custom listbox select in the native top layer: grouped options with icons, a gliding highlight, drawn check marks, typeahead, full keyboard support and a real form value.

Open

placeholder

disabled

required

Installation

npx shadcn@latest add @glint-ui/select

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/select.json

Usage

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

<Select
  name="fruit"
  placeholder="Pick a fruit"
  options={[
    { label: "Fruits", options: [{ value: "apple", label: "Apple" }, { value: "pear", label: "Pear" }] },
  ]}
/>

Props

Prop	Type	Default	Description
placeholder	string	"Select an option"	Shown when nothing is selected.
disabled	boolean	false	Disable the trigger.
required	boolean	false	Native form validation when `name` is set.
options	ReactNode	—	(SelectOption \| { label, options: SelectOption[] })[]; SelectOption = { value, label, icon?, description?, disabled? }.
value	ReactNode	—	Selected value (controlled, with onValueChange).
defaultValue	ReactNode	—	Initial value (uncontrolled).
name	ReactNode	—	Form field name; submitted like a native select.
className	string	—	Extra classes for the root element.