# Select

## Pure Owl component

```js
import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
```

```base-ui
<div style="max-width: 180px">
  <Select value="'dark'">
    <SelectTrigger>Theme</SelectTrigger>
    <SelectContent>
      <SelectItem value="'light'">Light</SelectItem>
      <SelectItem value="'dark'">Dark</SelectItem>
      <SelectItem value="'system'">System</SelectItem>
    </SelectContent>
  </Select>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Select` | `value` | `String` | optional |
| `Select` | `onChange` | `Function` | optional |
| `Select` | `className` | `String` | optional |
| `SelectContent` | `className` | `String` | optional |
| `SelectItem` | `value` | `String` | required |
| `SelectItem` | `className` | `String` | optional |
| `SelectTrigger` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<div b-ui="select">
  <button b-select-trigger type="button">
    <span b-select-value>Owner</span>
  </button>
  <div b-select-content>
    <div b-select-item b-att-value="owner">Owner</div>
    <div b-select-item b-att-value="editor">Editor</div>
  </div>
</div>
```