Funkwhale UI

Appearance

Forms ​

Form fields ​

Other useful components ​

Using forms

Accessible forms ​

  • Help the user fill a form by providing guidance, suggestions and appropriate error messages (Alert component). Use the role prop to make the announcement more polite or more intrusive. Test with a screenreader.
  • Make fields in a form predictable by announcing their effects and cross-connections early. Never just disable a field that is incompatible with the data a user entered in other fields - always make the reason for automatic changes and input errors very clear.
  • Provide easy steps and instructions for recovery from errors and incompatibilities.
  • Provide Undo and/or Reset functionality where appropriate.

Model ​

ts
const text = ref("")
const toggled = ref(false)
const username = ref("")
const password = ref("")
const options = {
  required: "We will not send you any E-Mails unless legally required",
  'important only': "You will be informed about important changes only",
  everything: "You will receive updates about every change"
} as const

const option = ref<keyof typeof options>('required')

const roles = ref({
  1: 'Maintainer',
  2: 'Contributor',
  3: 'User'
} as const)

const role = ref<keyof typeof roles.value>(2)

  const pills = ref < {
    currents: { type: 'custom' | 'preset', label: string }[],
    others?: { type: 'custom' | 'preset', label: string }[]
  }>({
    currents: [{
      type: 'preset',
      label: "Tag-A"
    }, {
      type: 'custom',
      label: "Tag-B"
    }, {
      type: 'custom',
      label: "Tag-C"
    }],
  others: []
  })

const errors = computed(()=>
  text.value.includes(' ')
  ? [ 'Make sure your message does not contain any spaces' ]
  : []
)

Template ​

template
<Layout
  stack
  class="outline"
  style="overflow: scroll; height: 83px; border-radius: 8px;"
>
  <Alert
    v-for="(error, index) in errors"
    :key="error"
    red
  >
    Error {{ index+1 }} / {{ errors.length }}: {{ error }}
  </Alert>
</Layout>
<Layout
  form
  stack
  gap-48
>
  <Textarea
    v-model="text"
    label="Your message"
  />

  <Pills
    :get="p => { pills = p }"
    :set="_ => pills"
  />

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

  <Toggle
    v-model="toggled"
    label="Enable plugins"
  />

  <Input
    v-model="username"
    label="User name"
    autocomplete="username"
  />
  <Input
    v-model="password"
    label="Password"
    password
  />

  <Slider
    v-model="option"
    :options
    label="Receive E-Mails"
  />

  <Button primary>
    Submit
  </Button>
</Layout>

Test these components in isolation against WCAG2 criteria