Skip to content

Switch

Represents a remote boolean, binary or ternary preference that the user can switch instantly

Examples:

  • Track is user's favorite
  • User prefers light mode or dark mode

If the user has to save the setting before it goes into effect, use Checkbox (coming soon) instead. If there is no associated remote data and the element just toggles something in the Ui, use Toggle or Button.

Using this component

A11y Checklist

Accessible switch

template
<Switch
  v-model="switched"
  label="Enable plugins"
/>

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

See the complete Form example