# Switch

```ts
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.

```tsx
import { createModel } from "cx/data";
import { bind, expr, LabelsTopLayout } from "cx/ui";
import { Switch } from "cx/widgets";

interface Model {
  enabled: boolean;
}

const m = createModel<Model>();

export default (
  <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>
);

```

## 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      | Default | 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 |