# Select

> 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.

Facade UI item `select` (ui, atom).
Docs page: https://facadeui.dev/components/select · Registry JSON: https://facadeui.dev/r/select.json

## Install

```bash
npx shadcn@latest add @facade/select
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/select.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, lucide-react@^1.47.0, @facade/utils.

Files: `components/ui/select.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/select-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

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

const COUNTRIES = [
  { value: "nl", label: "Netherlands" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "be", label: "Belgium" },
  { value: "xx", label: "Atlantis", disabled: true },
]

const PLANS = [
  { value: "starter", label: "Starter" },
  { value: "team", label: "Team" },
  { value: "enterprise", label: "Enterprise" },
]

export function Demo() {
  return (
    <div className="grid max-w-2xl gap-6 sm:grid-cols-2">
      <Select
        label="Country"
        name="country"
        items={COUNTRIES}
        placeholder="Choose a country"
        description="Where the invoice is addressed."
        required
      />
      <Select
        label="Plan"
        name="plan"
        items={PLANS}
        defaultValue="enterprise"
        error="Enterprise needs a sales call first."
      />
    </div>
  )
}
```

## Props

### SelectProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` |  | Required. Use `hideLabel` if it should not be visible. |
| `hideLabel` | `boolean` | `false` | Hides the label visually but keeps it for screen readers. |
| `description` | `ReactNode` |  | Help text below the field. It is linked to the field for you. |
| `error` | `ReactNode` |  | Error message. Marks the field invalid and is announced with it. |
| `items` (required) | `SelectOption[]` |  | The options, in order. |
| `placeholder` | `string` | `"Choose one"` | Shown in the trigger until something is chosen. |
| `name` | `string` |  | Names the value in a submitted form. |
| `value` | `string \| null` |  | The chosen value. Use with `onValueChange`. |
| `defaultValue` | `string \| null` |  | The value on first render, when you do not control it. |
| `onValueChange` | `(value: string \| null) => void` |  | Called with the new value when the user chooses an option. |
| `required` | `boolean` |  |  |
| `disabled` | `boolean` |  |  |
| `id` | `string` |  |  |
| `className` | `string` |  | Classes for the outer Field.Root. |
| `triggerClassName` | `string` |  | Classes for the trigger button. |