Toggle

Toggle renders a checkbox to look like a toggle.

Code Example

<Toggle v-model="isChecked" />

Components

Toggle is a standalone component.

Toggle

Toggle can be customized with the following props:

Prop	Type	Description
`model-value`	string	controls the checked state. Use with `v-model`
`disabled`	boolean	Disables the component both visually and functionally.
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

There are two ways of specifying color:

The primary, secondary, neutral, accent, info, success, warning, and error boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<Toggle v-model="isChecked" primary />

Size

There are two ways of specifying size:

The xs, sm, md, and lg boolean props.
The size prop, which accepts a string with any of the above prop names.

lgmdsmxs

Code Example

<Toggle v-model="isChecked" lg />

In Card

Remember Me

Code Example

<Card bordered class="w-64 p-6">
  <Label class="cursor-pointer">
    <LabelText>Remember Me</LabelText>
    <Toggle v-model="isChecked" />
  </Label>
</Card>

Prev Textarea

Next Artboard