DXSwitch

A “filled box” toggle switch built on DFormCheckbox: a bordered box sized like a form control, with the label on the left and the toggle on the right. The whole box carries the state colour and the pill stays a neutral affordance — by default (on-variant="success") the box is green when on, light red when off, the house style for an active/enabled/good switch. Set on-variant="neutral" (brand primary on / grey off) for semantically-mixed switches that shouldn’t imply good/bad (“contains alcohol”, an allergen toggle, “hidden on web shop”). Unlike a checkbox it can say what each state means via textWhenTrue/textWhenFalse — use them so the label names each state too. It’s the same control DXForm / DXField render for a type: 'switch' field (set the on-state colour there with the switchVariant field option) — reach for DXSwitch directly when you want that styled toggle outside a form.

Use a switch sparingly. A switch implies a distinct, meaningful on/off state (e.g. “Product is current” / “not current”), and reads best with textWhenTrue/textWhenFalse so the label reflects that state. For selecting options, opting in, or a plain boolean you’re editing in a form that saves on submit, a checkbox (DFormCheckbox, or a DXField type: 'checkbox') is usually the clearer choice.

Live Examples

Contextual text (changes with state)

Product is current

current: true — toggle it to see the label change

Static label

Enabled

Auto-save

Filled box: green-on / light-red-off by default

Product is current

Product is not current

Default on-variant="success": the whole box is green when on, light red when off, with a neutral pill. Pair textWhenTrue/textWhenFalse so the label names each state too.

Contains alcohol

No alcohol

on-variant="neutral" for mixed-semantics switches: primary on, grey off — no good/bad valence.

Disabled

Locked on

Locked off

Custom label (default slot)

Beta features (experimental)

Show Code

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
modelValue	boolean	No	false	Whether the switch is on (v-model). Expects a real boolean; normalise a truthy non-boolean (e.g. a serialised 1) before binding.
label	string	No	-	Static text beside the toggle; the fallback when no contextual text applies.
textWhenTrue	string	No	-	Text shown when on — overrides label in the on state (e.g. "Product is current").
textWhenFalse	string	No	-	Text shown when off — overrides label in the off state (e.g. "Product is not current").
onVariant	"success" | "neutral"	No	"success"	On-state colour. "success" (default) is green-on / red-off for an active/enabled/good switch; "neutral" is brand primary-on / grey-off for mixed-semantics switches that should not imply good/bad.
size	"sm"	No	-	Compact box (a few px shorter than the default, which matches the input height) for dense rows that repeat the switch per item, e.g. a per-line visibility toggle in a modal. Omit for the standard size, which lines the switch up with fields beside it.

Any other attributes (disabled, id, name, aria-*, …) are forwarded to the underlying DFormCheckbox.

Slots

Name Click to sort ascending	Description	Scoped Props
default	Label content beside the toggle; overrides the text props. Scoped with the current on-state so you can vary rich content by state.	-

Notes

The on-state uses --bs-primary, matching the base DFormCheckbox switch, checkboxes and radios; green stays reserved for success semantics. For a form field with a label column, validation, hint and contextual on/off text, use a DXForm / DXField type: 'switch' (which renders DXSwitch internally).