import Select from "@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 <select> element and inherits its frustrating shortcomings, especially when it comes to styleing. For future paths, see this excellent article on css-tricks.

const current = ref(2);
const options = ref({
  1: 'One',
  2: 'Two',
  3: 'Three'
});

<Select
  label="Select an option"
  v-model:current="current"
  v-model:options="options"
/>

Add a custom label ​

The select supports a label slot for custom label content if the text-only label prop is not flexible enough.

<Select
  v-model:current="current"
  v-model:options="options"
>
  <template #label>
    <strong>Custom Label</strong>
  </template>
</Select>

Add a prefix icon ​

Use the icon prop to add a Bootstrap icon before the select input.

<Select
  label="Navigation"
  icon="bi-house"
  v-model:current="current"
  v-model:options="options"
/>

Add placeholder text ​

Use an informative placeholder when no valid option is initially selected. The placeholder cannot be re-selected but stays visible.

const nullable = ref(undefined)

<Select
  label="Choose an option"
  placeholder="Select one..."
  v-model:current="nullable"
  v-model:options="options"
/>

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.

const initial = ref(1)

<Select
  label="Resettable selection"
  v-model:current="current"
  v-model:options="options"
  v-model:initial="initial"
/>

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.

<Button primary @click="isOpen = true">
  Open modal
</Button>
<Modal v-model="isOpen" title="My modal">
  Modal content
</Modal>

Colors and variants ​

The Select component supports standard color and variant props from the color composable including primary, secondary, solid, ghost, outline, and other styling props.

<Select v-for = "color in [
  'primary',
  'ghost',
  'outline',
  'green',
  'destructive',
  'raised'
  ]"
  v-bind="{[color]: true}"
  v-model:current="current"
  v-model:options="options"
/>

<Select
  v-model:current="role"
  v-model:options="roles"
  label="Select a role"
/>