# Select (/docs/products/dash-dots/reference/components/select)

Put an `Option` inside it for each choice. The choices open in a sheet.

**Children:** Components

## Example

![The Select component](/assets/images/dash-dots/components/select.webp)

```xml title="view.dml"
<Select label="Delivery" placeholder="Choose how" value="{{ delivery }}" onChange="setDelivery">
  <Option value="pickup" label="Pick up in store" />
  <Option value="courier" label="Courier" />
  <Option value="post" label="Post" />
</Select>
```

```ts title="controller.ts"
export default definePage({
  initialState: { delivery: 'pickup' },
  mutations: {
    setDelivery: (_state, event: ValueEvent) => ({ delivery: event.detail.value }),
  },
});
```

## Props

| Prop          | Type      | What it is                                          |
| ------------- | --------- | --------------------------------------------------- |
| `value`       | `string`  | The chosen option's `value`.                        |
| `label`       | `string`  |                                                     |
| `placeholder` | `string`  |                                                     |
| `hint`        | `string`  | Help shown under the field, which `error` replaces. |
| `error`       | `string`  | Shown under the field in red, in place of `hint`.   |
| `disabled`    | `boolean` | Dims it, and the person can't use it.               |

## Events

| Event      | Sends                   | Notes                      |
| ---------- | ----------------------- | -------------------------- |
| `onChange` | `{ value }` in `detail` | The chosen option's value. |