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 switched = 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 = {
  1: 'Maintainer',
  2: 'Contributor',
  3: 'User'
} as const

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

const suggestions = [{
  label: 'Tag-A',
  isCustom: false
}, {
  label: 'Tag-B',
  isCustom: false
}, {
  label: 'Tag-C',
  isCustom: false
}, {
  label: 'suggestion',
  isCustom: false
} as const]
const pills = ref(suggestions.filter(s => s.label.includes('Tag')))

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

Template ​

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

  <Tokens v-model="pills" :suggestions label="Tags" />

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

  <Switch
    v-model="switched"
    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 class="color-primary-solid">
    <Icon icon="mdi:check" />
    Submit
  </Button>
</Layout>

Test these components in isolation against WCAG2 criteria