Funkwhale UI

Appearance

ts
import Select from '~/ui/Select.vue'

Select ​

Select a value from a list of labeled options.

Uses two v-model bindings: v-model for the selected value and :options for the available options. Each option is a value: label field where value is string | number. You can use a const object for the options, or a ref in case the options change during runtime.

ts
const current = ref(2);
const options = {
  1: 'One',
  2: 'Two',
  3: 'Three'
};
template
<Select
  label="Select an option"
  v-model="current"
  :options
/>

NOTE

To convey the intent of the selection control, add either a text label (label prop) or a custom, screenreader-friendly label template. Read more on form field labelling

In addition, use type and autocomplete attributes to make use of the existing taxonomy of machine-readable semantic markup. (Vue will add any additional attributes to the <select> node at compile-time).

Add a custom label ​

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

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

Add a prefix icon ​

Use the icon prop to add an icon before the select input, using Iconify's collection:name format.

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

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)
template
<Select
  label="Choose an option"
  placeholder="Select one..."
  v-model="nullable"
  :options
/>
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)
template
<Select
  label="Resettable selection"
  v-model="current"
  :options
  :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.

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

Colors and variants ​

Deprecation

Prefer using color classes

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

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

Using this component

A11y Checklist ​

Accessible select ​

vue
<Select
  v-model="role"
  class="shape-field-full"
  :options="roles"
  label="Select a role"
/>

See the complete Form example

Test this component in isolation against WCAG2 criteria