Guide

Forms & accessibility

Use visible labels, native form attributes, and application-owned messages.

A small form

ExampleForm.vue

<script setup lang="ts">
import { ref } from 'vue'
import Input from './components/ui/input/Input.vue'
import Select from './components/ui/select/Select.vue'

const email = ref('')
const country = ref<string>()
const countries = [{ label: 'Luxembourg', value: 'LU' }]
const messages = { listboxLabel: 'Country options', empty: 'No options', clearSelection: 'Clear selection' }

function reset() { email.value = ''; country.value = undefined }
</script>

<template>
  <form @reset.prevent="reset">
    <label for="email">Email</label>
    <Input id="email" v-model="email" name="email" type="email" required />
    <label for="country">Country</label>
    <Select id="country" v-model="country" name="country" :options="countries"
      :messages="messages" required />
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </form>
</template>

Remember

Labels

Use a visible label. A placeholder is not a label.

Messages

Pass your app's text to MultiSelect and NumberInput. Select accepts messages for empty and clear states.

Errors

Pair invalid state with visible text linked by aria-describedby.

Reset

Reset Vue models in the form reset handler.

MultiSelect submits repeated fields. Read them with FormData.getAll(name).