Switch

TipsResume interrupted workCompletion sound

import { useState } from "react";
import { Switch } from "@arcadia/ui";

function Settings() {
  const [tips, setTips] = useState(true);
  return (
    <div {...sx("cmp-settings", cmp.settings)}>
      <Switch
        label="Tips"
        checked={tips}
        onCheckedChange={setTips}
        rootStyle={cmp.settingsChild as never}
      />
      <Switch
        label="Resume interrupted work"
        hint="Picks up where a chat stopped after a reload."
        defaultChecked
        rootStyle={[cmp.settingsChild, cmp.settingsRest] as never}
      />
      <Switch label="Completion sound" hint="Needs system notifications." disabled rootStyle={[cmp.settingsChild, cmp.settingsRest] as never} />
    </div>
  );
}

TSX

import { useState } from "react";
import { Switch } from "@arcadia/ui";

function Usage() {
  const [on, setOn] = useState(false);
  return <Switch label="Chime when a turn ends" checked={on} onCheckedChange={setOn} />;
}

Monochrome: on is an ink track with a page-coloured knob (white and night at night, night ink and white by day), never green. The knob comes to rest on the release spring (--ease-release, 280ms, a slight settle past its stop) and the track colour changes in 150ms. With a visible label the whole row is the click target, and className and style land on that row.

Examples

Track only

hideLabel renders the track alone and makes the label its accessible name: menu rows, dense toolbars. sm is 26×16.

import { Switch } from "@arcadia/ui";

<Switch label="Auto model" hideLabel size="sm" defaultChecked />

In a form

Give it a name and it submits with the form like a checkbox: the field is present when on and absent when off.

import { useState } from "react";
import { Button, Switch } from "@arcadia/ui";

function InAForm() {
  const [saved, setSaved] = useState<string | null>(null);
  const save = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSaved(new FormData(e.currentTarget).get("digest") ? "on" : "off");
  };
  return (
    <form {...sx("cmp-form", cmp.form)} onSubmit={save}>
      <Switch
        name="digest"
        label="Weekly digest"
        defaultChecked
      />
      <div {...sx("cmp-form-actions", cmp.formActions)}>
        {saved && <span {...sx("cmp-result", cmp.result)}>Saved: digest {saved}</span>}
        <Button type="submit" variant="primary" size="sm">Save</Button>
      </div>
    </form>
  );
}

Size and stateShow interaction states

OffOnDisabledDisabled, onSmall

Medium

rootStyle takes where the switch sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

TSX

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // a bare switch pushed to the end of its row
  end: { marginInlineStart: "auto" },
});

<Switch label="Chime" hideLabel rootStyle={styles.end} />

--switch-track: PaintDefault var(--fill-2); Track fill when off.
--switch-track-hover: PaintDefault var(--fill-1); Track fill when off, under the pointer (on the track or its label row).
--switch-track-on: PaintDefault var(--bg-inverse); Track fill when on.
--switch-knob-on: PaintDefault var(--bg-app); Knob fill when on.

rootStyle lands on the outermost element: the label row, or the track with hideLabel. The knobs live there too, so hovering the row lights the track.

A switch role with aria-checked; the label and a hint are wired to it by id, so it reads "Resume interrupted work, switch, on, Picks up where a chat stopped after a reload". label is required, even with hideLabel. A label says what the switch turns on; one that cannot takes a hint, and a disabled switch says why in its hint, as Completion sound does above.

Space: Toggles the switch
Tab: Moves to the next control

checked: boolean; Controlled state.
defaultChecked: booleanDefault false; Initial state when uncontrolled.
onCheckedChange: (checked: boolean, details: { event: Event }) => void; Called with the new state when the switch toggles.
readOnly: boolean; Shown but not changeable (aria-readonly).
labelrequired: ReactNode; Required. Rendered as the row label, or as aria-label with hideLabel (then pass a string).
hint: string; Why or how, for a switch its label cannot explain: a Hint after the label, and the switch's description. At most 160 characters.
hideLabel: boolean; Render only the track; the label becomes its accessible name.
size: "sm" | "md"Default "md"; md: 32×20 with a 16px knob, for settings. sm: 26×16 with a 12px knob, for menu rows.
rootStyle: SwitchStyle; Typed StyleX override on the outermost element (the label row, or the track with hideLabel): layout and the --switch-* knobs.
className: string; A product's hook class on the outermost element, for its own layout rules. Being retired: new code places a switch with rootStyle; the call sites left are counted by ui.lint (kit-classname) and only go down.
disabled: boolean; Dims the row and blocks toggling.

Rest props go to <button> props.

Usage

Examples

Track only

In a form

Matrix

Customising

Accessibility

API reference

Switch