Switch
Binary on/off track-and-knob control, RTL-aware knob travel.
Preview
On / disabled
<label class="nx-switch"><input type="checkbox" role="switch" checked><span class="nx-switch__track"></span>Auto-assign jobs</label><label class="nx-switch"><input type="checkbox" role="switch" disabled><span class="nx-switch__track"></span>Locked</label><NxSwitch label="Auto-assign jobs" defaultChecked />
<NxSwitch label="Locked" disabled />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | ReactNode | undefined | Rendered after the track, inside the <label>. |
Classes
| Class | Description |
|---|---|
.nx-switch | Label wrapper |
.nx-switch__track | 38×22 track, RTL-mirrored knob travel |
States
disabled
Accessibility
- NxSwitch sets role="switch" on the underlying checkbox input; the visible label communicates on/off, never colour alone.
Do / Don’t
- Do: Use for an immediate-effect binary setting.Don’t: Don't use a switch for an action that needs a confirm step — use a button + dialog instead.