# Select: Disabled and invalid

> Disable the whole select or single options, and mark it invalid with aria-invalid.

Example: https://hextaui.com/docs/select/examples/states
Component docs: https://hextaui.com/docs/select.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/select-states.json
```

This adds `components/examples/select/states.tsx` with the Select component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/select/states.tsx"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function SelectStates() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Select defaultValue="pro" disabled>
        <SelectTrigger aria-label="Plan" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="pro">Pro</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="weekly">
        <SelectTrigger aria-label="Digest" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="daily">Daily</SelectItem>
          <SelectItem value="weekly">Weekly</SelectItem>
          <SelectItem value="monthly" disabled>
            Monthly (soon)
          </SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger aria-label="Region" aria-invalid className="w-36">
          <SelectValue placeholder="Region" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="us">United States</SelectItem>
          <SelectItem value="eu">Europe</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
```

## Props in this example

### Select

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `Value \| Value[] \| null` | – |  |
| `disabled` | `boolean` | `false` |  |

### SelectValue

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `ReactNode` | – |  |

### SelectItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |
| `disabled` | `boolean` | `false` |  |

## More Select examples

- [Sizes](https://hextaui.com/docs/select/examples/sizes.md)
- [Groups and long lists](https://hextaui.com/docs/select/examples/groups.md)
- [With icons](https://hextaui.com/docs/select/examples/icons.md)
- [Multiple](https://hextaui.com/docs/select/examples/multiple.md)
- [In a form](https://hextaui.com/docs/select/examples/field.md)
- [Below the trigger](https://hextaui.com/docs/select/examples/dropdown.md)
- [Right to left](https://hextaui.com/docs/select/examples/rtl.md)