Switch

Switch is a single boolean control styled as a sliding track + thumb, with an inline label. Use it for settings that take effect immediately; reach for Checkbox when the value is part of a form to submit. description / error / required are built in via Field. It implements the kit's form-control contract — name submits, and ref / onBlur land on the hidden input — so it binds to react-hook-form, TanStack Form, or a plain <form> with no glue.

import { Switch } from '@42/ui-react/switch';

<Switch label="Available for evals" />

Playground

<Component label="Available for evals" size="md" />

Sizes

Five sizes — xs through xl — matching the rest of the family. The track and thumb scale together.

<Switch size="xs" label="xs" defaultChecked /><Switch size="sm" label="sm" defaultChecked /><Switch size="md" label="md" defaultChecked /><Switch size="lg" label="lg" defaultChecked /><Switch size="xl" label="xl" defaultChecked />

Colors

The resting track is palette-independent; only the checked fill and the focus ring adopt color. Set data-color once on the root and every kit palette tints for free.

<Switch color="brand" label="brand" defaultChecked /><Switch color="green" label="green" defaultChecked /><Switch color="blue" label="blue" defaultChecked /><Switch color="purple" label="purple" defaultChecked /><Switch color="red" label="red" defaultChecked />

Disabled

disabled dims the control and blocks interaction.

<Switch label="Disabled" disabled /><Switch label="Disabled, on" disabled defaultChecked />

With description & error

description (helper text) and error sit below the control via the built-in Field. Passing error flips the track to the invalid (red) state; required adds the semantic flag and a red asterisk on the label.

<Switchlabel="Evaluation reminders"description="We'll only ping you about peer evaluations."defaultChecked/><Switch label="Accept the terms" required /><Switch label="Accept the terms" error="You must accept to continue" />

Controlled

Drive the checked state from state. onCheckedChange hands you the next boolean.

'use client';
import { useState } from 'react';
import { Switch } from '@42/ui-react/switch';

export function AvailabilityToggle() {
  const [on, setOn] = useState(false);
  return <Switch label="Available for evals" checked={on} onCheckedChange={setOn} />;
}

Forms

Switch renders a hidden native <input type="checkbox">, so a name wires it into native <form> submission and FormData. The submitted value defaults to "on".

<form action={save}>
  <Switch name="notifications" value="enabled" label="Enable notifications" />
</form>

API

Accessibility

• Full Switch model from Ark: Space / Enter toggles, focus shows the ring, and the track / label / description / error associations are wired (the latter via the built-in Field).
• A hidden native <input type="checkbox"> backs form submission and carries aria-checked; the visual track is presented as the switch.
• invalid (or error) sets aria-invalid on the input.
• RTL is honored via the document dir — the track and label mirror automatically.