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-central/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 adopts color. The focus ring is the kit's fixed brand-500 regardless of palette — see Focus. Set data-color once on the root and every kit palette tints for free. The one exception is neutral, which fills green: its solid is the same white as the thumb on a dark page.

<Switch color="neutral" label="neutral" defaultChecked />
<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.

<Switch
  label="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-central/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.
• testId renders as data-testid on that same root element, never the hidden native input. See the Testing guide.
• RTL is honored via the document dir — the track and label mirror automatically.

Changelog