{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "select",
"type": "registry:ui",
"title": "Select",
"description": "A drop-down list built on Base UI's Select and Field. The label, help text and error message are connected to the control, and a hidden input carries the chosen value when a form is submitted.",
"categories": [
"atom"
],
"dependencies": [
"@base-ui/react@^1.9.0",
"lucide-react@^1.47.0"
],
"registryDependencies": [
"https://facadeui.dev/r/utils.json"
],
"files": [
{
"path": "src/ui/select.tsx",
"type": "registry:ui",
"target": "components/ui/select.tsx",
"content": "/**\n * Select — a drop-down list built on Base UI's Select inside a Field, so the\n * label, description and error are wired to the control the same way `Input`\n * wires them.\n *\n * a11y notes worth keeping:\n *\n * - The trigger is a `combobox` button named by the label. Base UI handles the\n * listbox roles, arrow keys, typeahead, Escape and returning focus.\n * - `Field.Root invalid` marks the trigger `aria-invalid` and turns the border\n * red for an error passed in from outside, such as one from a server.\n * - \"required\" is spelled out in the label, as in `Input`.\n * - A hidden `` carries the value, so the field works in a plain form.\n * - Options are 44px tall. The popup sits below the trigger rather than over\n * it, so the label stays visible while the list is open.\n *\n * Not a client component: it creates no functions and holds no state. The\n * placeholder is a `null` entry in Base UI's `items`, because a function child\n * on `Select.Value` could not be rendered from a server component.\n *\n * Dependencies: @base-ui/react, lucide-react, react,\n * @/lib/utils.\n */\n\nimport { Field } from \"@base-ui/react/field\"\nimport { Select as BaseSelect } from \"@base-ui/react/select\"\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface SelectOption {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport interface SelectProps {\n /** Required. Use `hideLabel` if it should not be visible. */\n label: ReactNode\n /** Hides the label visually but keeps it for screen readers. */\n hideLabel?: boolean\n /** Help text below the field. It is linked to the field for you. */\n description?: ReactNode\n /** Error message. Marks the field invalid and is announced with it. */\n error?: ReactNode\n /** The options, in order. */\n items: SelectOption[]\n /** Shown in the trigger until something is chosen. */\n placeholder?: string\n /** Names the value in a submitted form. */\n name?: string\n /** The chosen value. Use with `onValueChange`. */\n value?: string | null\n /** The value on first render, when you do not control it. */\n defaultValue?: string | null\n /** Called with the new value when the user chooses an option. */\n onValueChange?: (value: string | null) => void\n required?: boolean\n disabled?: boolean\n id?: string\n /** Classes for the outer Field.Root. */\n className?: string\n /** Classes for the trigger button. */\n triggerClassName?: string\n}\n\nexport function Select({\n label,\n hideLabel = false,\n description,\n error,\n items,\n placeholder = \"Choose one\",\n name,\n value,\n defaultValue,\n onValueChange,\n required,\n disabled,\n id,\n className,\n triggerClassName,\n}: SelectProps) {\n // Base UI shows the label of the `null` item while nothing is chosen.\n const labels = [{ value: null, label: placeholder }, ...items]\n\n return (\n \n \n {label}\n {required ? (required) : null}\n \n\n \n \n \n \n \n \n \n\n \n \n \n \n {items.map((item) => (\n \n \n \n \n \n {item.label}\n \n \n ))}\n \n \n \n \n \n\n {description ? (\n \n {description}\n \n ) : null}\n\n {/* `match` shows an error from outside, which Base UI's own validity\n state knows nothing about. Without one, no children are passed, so\n Base UI shows the browser's own message for a failed check. */}\n \n \n )\n}\n"
}
],
"docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/select"
}