Toggle switch for turning settings on or off, with an optional label, a supporting description linked for screen readers, and a configurable label position.

import { Switch } from "@plexui/vue/components/Switch";

Examples

Overview

With label

With description

Label position

Label position with description

Default checked

Controlled

Disabled

Disabled with label

Disabled with description

With Field

With Field and description

Settings panel

Grouped sections

API

Prop	Type	Default	Description
`checked / v-model:checked`	`boolean`	—	Controlled state
`default-checked`	`boolean`	—	Initial state (uncontrolled)
`label`	`string`	—	Accessible label rendered next to the switch
`label slot`	`VNode[]`	—	Rich label content; takes precedence over the label prop
`description`	`string`	—	Secondary text below the label, linked via aria-describedby
`description slot`	`VNode[]`	—	Rich description content; takes precedence over the description prop
`label-position`	`"start" \| "end"`	`"end"`	Label on the left (start) or right (end)
`disabled`	`boolean`	`false`	Prevent interaction
`required`	`boolean`	—	Required for form submission
`name`	`string`	—	Form field name
`value`	`string`	`"on"`	Value when submitted
`class`	`string`	—	CSS classes applied to the wrapper node
`id`	`string`	—	The id of the switch element (generated when omitted)
`@update:checked`	`(next: boolean) => void`	—	Emitted with the next state when toggled
`@focus`	`(event: FocusEvent) => void`	—	Emitted when the switch gains focus
`@blur`	`(event: FocusEvent) => void`	—	Emitted when the switch loses focus

Other attributes and listeners land on the switch <button>. Built on Reka UI Switch. Inside a <form>, a hidden native checkbox mirrors the state so the value is submitted with the form.

Styling

Switch reads these component tokens. Override them at any scope to restyle it:

--field-label-font-weight: label font weight (default var(--font-weight-medium))
--switch-label-gap: label gap (default spacing(2))
--switch-thumb-color: thumb color (default light-dark(var(--gray-0), var(--gray-1000)))
--switch-thumb-color-disabled: thumb color disabled (default light-dark(var(--gray-0), var(--gray-800)))
--switch-thumb-offset: thumb offset (default 3px)
--switch-thumb-shadow: thumb shadow (default 0 1px 2px rgb(0 0 0 / 20%))
--switch-thumb-size: thumb size
--switch-track-color: track color (default light-dark(var(--gray-150), var(--gray-400)))
--switch-track-color-checked: track color checked (default light-dark(var(--gray-900), var(--blue-400)))
--switch-track-color-checked-disabled: track color checked disabled (default light-dark(var(--gray-300), var(--blue-700)))
--switch-track-color-disabled: track color disabled (default light-dark(var(--gray-100), var(--gray-300)))
--switch-track-color-hover: track color hover (default light-dark(var(--gray-200), var(--gray-450)))
--switch-track-height: track height (default 19px)
--switch-track-width: track width (default 32px)

CheckboxCheckbox for binary on/off selection with solid, pill, and ghost variants, an indeterminate state, and rich labels with inline descriptions.Radio GroupRadio group for single-choice selection with row or column layout, right-aligned indicators, rich item content, and card-style options.FieldForm field wrapper with a label, helper text, an error message, and automatic accessibility linking to its control.

Switch

Related components

On this page