funkwhale/front/ui-docs/components/ui/select.md

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 <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 instead of using the label prop. <Select v-model:current="current" v-model:options="options" > <template #label> <strong>Custom Label</strong> </template> </Select> <Select v-model:current="current" v-model:options="options" <template #label> Custom Label

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" /> {{ 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.

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> Open 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"
/>