Switch

import { Switch } from 'cx/widgets';

The Switch widget is a two-state toggle control. It offers the same functionality as a Checkbox but with a modern sliding appearance that’s commonly used for on/off settings.

 <LabelsTopLayout vertical>
  <Switch
    label="Standard"
    on={bind(m.enabled, true)}
    text={expr(m.enabled, (v) => (v ? "ON" : "OFF"))}
  />
  <Switch label="Disabled" on={m.enabled} disabled />
  <Switch label="Read-only" on={m.enabled} readOnly />
  <Switch
    label="Styled"
    on={m.enabled}
    handleStyle="background: white"
    rangeStyle="background: lightsteelblue"
  >
    <span class="text-red-500">Custom text</span>
  </Switch>
</LabelsTopLayout> 
 interface Model {
  enabled: boolean;
}

const m = createModel<Model>(); 
 import { createModel } from "cx/data";
import { bind, expr, LabelsTopLayout } from "cx/ui";
import { Switch } from "cx/widgets"; 

Standard

Disabled

Read-only

Styled

Custom text

Configuration

Core Properties

Property	Type	Default	Description
`on`	`boolean`	`false`	State of the switch (true = on)
`off`	`boolean`	`true`	Inverse state (true = off). Alternative to `on`
`value`	`boolean`		Alias for `on`
`text`	`string`		Text displayed next to the switch
`label`	`string`		Label displayed before the switch
`disabled`	`boolean`	`false`	Disables the switch
`readOnly`	`boolean`	`false`	Makes the switch read-only
`required`	`boolean`	`false`	Marks the field as required
`viewMode`	`boolean`	`false`	Display as plain text instead of interactive switch
`autoFocus`	`boolean`	`false`	Automatically focus the switch on mount

Appearance

Property	Type	Description
`handleStyle`	`object`	CSS styles for the switch handle (knob)
`rangeStyle`	`object`	CSS styles for the track when switch is on
`emptyText`	`string`	Text shown in view mode when value is empty
`tooltip`	`string`	Tooltip text or configuration

Behavior

Property	Type	Default	Description
`focusOnMouseDown`	`boolean`	`false`	Whether to focus the switch on mouse down

Callbacks

Property	Type	Description
`onValidate`	`function`	Custom validation function returning error or undefined