```ts import Select from "~/components/ui/Select.vue" ``` # Select Select a value from a list of labeled options. Uses two v-model bindings: `v-model:current` for the selected value and `v-model:options` for the available options. Each option is a `value: label` field where value is `string | number`. _Note that this component currently extends the native HTML ` ```

```

## Add a prefix icon Use the `icon` prop to add a Bootstrap icon before the select input. ```vue-html

## Add placeholder text Use an informative `placeholder` when no valid option is initially selected. The placeholder cannot be re-selected but stays visible. ```ts const nullable = ref(undefined) ``` ```vue-html {{ nullable ?? "No option selected" }} ## Let the user reset to an initial value Set the `initial` prop. A `reset` button appears when the current value is different from the initial value. ```ts const initial = ref(1) ``` ```vue-html ## Auto-focus the component Use the `autofocus` prop to focus the select input immediately when the component mounts. Try it out: Click the `Open modal` button, then use the arrow keys to select an option. Close the modal with `ESC` and re-open it with `SPACE`. ```vue-html Modal content ```

```