Switch

TipsShow a rotating tip on the empty screenResume interrupted workPick up where a chat stopped after a reloadCompletion soundNeeds system notifications

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"
        description="Show a rotating tip on the empty screen"
        checked={tips}
        onCheckedChange={setTips}
        rootStyle={cmp.settingsChild as never}
      />
      <Switch
        label="Resume interrupted work"
        description="Pick up where a chat stopped after a reload"
        defaultChecked
        rootStyle={[cmp.settingsChild, cmp.settingsRest] as never}
      />
      <Switch label="Completion sound" description="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.

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"
        description="A summary of the week, every Monday"
        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>
  );
}

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} />

Takes	Default	Sets
`Paint`	`var(--fill-2)`	Track fill when off.
`Paint`	`var(--fill-1)`	Track fill when off, under the pointer (on the track or its label row).
`Paint`	`var(--bg-inverse)`	Track fill when on.
`Paint`	`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.

Usage

Examples

Track only

In a form

Matrix

Customising

Accessibility

API reference