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

1.6 KiB

import Toggle from "~/components/ui/Toggle.vue"

Toggle

Toggles are basic form inputs that visually represent a boolean value. Toggles 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.

Prop Data type Required? Description
big Boolean No Controls whether a toggle is big or not.
v-model:value Boolean Yes The value controlled by the toggle.

Normal toggle

Link your toggle to an input using the v-model directive.

<Toggle v-model="toggle" />

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"
/>