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

layout
page

import Toggle from "@ui/Toggle.vue"

Toggle

Toggles are basic form inputs that visually represent a boolean value.

{
  big?: boolean
  label: string
}

A toggle can be on (true) or off (false). For actions with more than 2 states or delayed, fallible, or effectful actions, consider using a Button with aria-pressed logic instead. Use v-model to bind a boolean to the toggle state.

<Toggle label="Enable audio input" v-model="toggle" />

[!NOTE] To convey the intent of the toggle, add a meaningful text label. Read more on form field labelling

Add label

<Toggle v-model="toggle" label="Option 358" />

Big toggle

Pass a big prop to create a larger toggle.

<Toggle
   big
   v-model="toggle"
   label="I am big"
/>

<Toggle big v-model="toggle" label="I am big" />

::: tip Using this component

A11y Checklist

• Provide a clear label that matches the situation when the toggle is 'on'. 2.5.3

Accessible toggle

<<<@/examples/Forms.a11y.vue#toggle

Test this component in the context of a form against WCAG2 criteria

See the complete Form example

:::