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, that colour-codes its state (a neutral box when off, a filled primary box when on). Unlike a checkbox it can say what each state means via textWhenTrue/textWhenFalse. It’s the same control DXForm / DXField render for a type: 'switch' field — 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

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").

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).