Skip to content
WeDanceDocs
Componentsbeta

Select

Pick one option from a list. A styled native select: on phones it opens the system picker, which is faster and more accessible than any custom dropdown.

Example

Value: —

vue
<Field label="Dance style">
  <Select v-model="style" :options="['Salsa', 'Bachata', 'Kizomba']" placeholder="Pick a style" />
</Field>

States

Choose your level.

Options

Strings for simple lists, objects when label and value differ or an option is disabled, the slot for groups.

vue
<Select
  v-model="level"
  :options="[
    { label: 'Beginner', value: 'beginner' },
    { label: 'Improver', value: 'improver' },
    { label: 'Teacher (invite only)', value: 'teacher', disabled: true },
  ]"
/>
vue
<Select v-model="city" placeholder="Choose a city">
  <optgroup label="Germany">
    <option value="munich">Munich</option>
    <option value="berlin">Berlin</option>
  </optgroup>
</Select>

Props

PropTypeDefaultDescription
v-modelstring | number''The selected value. "" means nothing picked (shows the placeholder).
options(string | { label, value, disabled? })[]—Shortcut for flat lists. For groups, put <option>/<optgroup> in the default slot instead.
placeholderstring—Prompt shown while empty. Rendered as a disabled first option, so it cannot be picked again.
size'default' | 'sm''default'Same heights as Input.
invalidbooleanfalseRed border + aria-invalid without a Field.
…attrsHTML attrs—name, disabled, required, id, aria-* go to the <select> (not the wrapper).

Do & don't

Do — Use Select for 5–15 options. Fewer: show them all as radio pills. Many more (cities, artists): a searchable field.

Don't — Hide a yes/no choice in a dropdown — a Checkbox or two pills is one tap instead of two.

Accessibility

  • Native select element: full keyboard support (arrows, type-ahead) and screen-reader semantics with no extra code.
  • The chevron is decorative (aria-hidden) and ignores clicks, so the whole field opens the picker.
  • Placeholder is a disabled option, not a label — keep the Field label.