BundyUI

Forms

Label

Switch

An on/off switch, with color and label/description options.

html
<UiSwitch />

Model value

modelValue is whether the switch is on, bound two-way with v-model.

Label

label is the text beside the switch — clickable along with it.

Description

description is secondary text below the label, for what the toggle actually changes — the consequence, not a restatement of the label.

Required

required shows an asterisk after the label.

Disabled

disabled disables interaction with the switch.

Color

color is the track's color once the switch is on.

The active/on track color follows the color prop; the thumb color doesn't change — only the track does.

Indicator

indicator sets which side the switch sits on. end pushes it to the far edge, which reads better in a settings list.

indicator here just moves the switch left/right of its label, unlike Checkbox/Radio where indicator="hidden" removes it entirely — Switch has no hidden option.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
modelValue
boolean
false
Whether the switch is on (checked).
label
string
—
The label displayed next to the switch.
description
string
—
Secondary text displayed below the label.
required
boolean
false
Shows a required asterisk after the label.
disabled
boolean
false
Disables interaction with the switch.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
The color of the track when the switch is on.
indicator
"start" | "end"
'start'
Position of the switch relative to the label.

Slots

Slot
default

Emits

Event
Payload
Description
update:modelValue
[value: boolean]
—