Switch

Turns one setting on or off at once. For a choice saved with a form, prefer a Checkbox.

Email alerts

import { Switch } from "@etched/reticle/switch";

export function Preview() {
  return <Switch label="Email alerts" defaultChecked />;
}

Installation

import { Switch, SwitchGroup, SwitchItem, SwitchLegend } from "@etched/reticle/switch";

Examples

States

import { Switch } from "@etched/reticle/switch";

export function States() {
  return (
    <div className="row">
      <Switch aria-label="Off" />
      <Switch aria-label="On" defaultChecked />
      <Switch aria-label="Disabled" disabled />
      <Switch aria-label="Disabled and on" disabled defaultChecked />
      <Switch aria-label="Neutral" variant="neutral" />
      <Switch aria-label="Neutral and on" variant="neutral" defaultChecked />
    </div>
  );
}

Sizes

smbaselg

import { Switch, type SwitchSize } from "@etched/reticle/switch";

const sizes: SwitchSize[] = ["sm", "base", "lg"];

export function Sizes() {
  return (
    <div className="row">
      {sizes.map((s) => (
        <Switch key={s} size={s} label={s} defaultChecked />
      ))}
    </div>
  );
}

Labels

transitioning marks a switch busy while its change saves.

import { Switch } from "@etched/reticle/switch";

export function Labels() {
  return (
    <div className="grid">
      <Switch label="Break down by full-time and internship" />
      <Switch label="Label first" controlFirst={false} defaultChecked />
      <Switch label="Send a weekly digest" required={false} />
      <Switch label="Saving" defaultChecked transitioning />
      <Switch label="LinkedIn sending (not configured)" disabled />
    </div>
  );
}

Groups

import { SwitchGroup, SwitchItem } from "@etched/reticle/switch";

export function Groups() {
  return (
    <div className="grid">
      <SwitchGroup legend="Notifications" description="Changes save at once.">
        <SwitchItem label="Run finished" defaultChecked />
        <SwitchItem label="Run failed" defaultChecked />
        <SwitchItem label="Weekly digest" />
      </SwitchGroup>
      <SwitchGroup legend="Bench controls (locked)" disabled>
        <SwitchItem label="Auto-drain" defaultChecked />
        <SwitchItem label="Night mode" />
      </SwitchGroup>
    </div>
  );
}

In a field

Email alerts

Sent to the run owner when a run fails.

import { Field } from "@etched/reticle/field";
import { Switch } from "@etched/reticle/switch";

export function InAField() {
  return (
    <div className="grid">
      <Field label="Email alerts" description="Sent to the run owner when a run fails.">
        <Switch defaultChecked />
      </Field>
    </div>
  );
}

API reference

SwitchGroup

Prop	Type	Default	Description
legend	ReactNode	–	Title of the group. Without it, add a `SwitchLegend` child or an `aria-label`.
children *	ReactNode	–	`SwitchItem` children, and optionally a `SwitchLegend`.
description	ReactNode	–	Help text below the group. Hidden while an error shows.
error	FieldError	–
disabled	boolean	–	Turns off every switch in the group.
controlFirst	boolean	true	Default `controlFirst` of every item.
aria-label	string	–
className	string	–	Class on the outer element, for layout.

SwitchItem

Prop	Type	Default	Description
variant	"default" \| "neutral"	"default"
required	boolean	–	`false` adds the optional marker after the label.
controlFirst	boolean	true	Switch before the label. `false` puts the label first. Inside a `SwitchGroup`, the group sets the default.
size	"sm" \| "base" \| "lg"	"base"
transitioning	boolean	–	Marks the switch busy (`aria-busy`) while a change is saved.
className	string	–	Class on the outer element, for layout.
label *	ReactNode	–

SwitchLegend

Prop	Type	Default	Description
children *	ReactNode	–
className	string	–

Switch

Prop	Type	Default	Description
variant	"default" \| "neutral"	"default"
label	ReactNode	–	Text beside the switch. Without it, give the switch an `aria-label`.
required	boolean	–	`false` adds the optional marker after the label.
controlFirst	boolean	true	Switch before the label. `false` puts the label first. Inside a `SwitchGroup`, the group sets the default.
size	"sm" \| "base" \| "lg"	"base"
transitioning	boolean	–	Marks the switch busy (`aria-busy`) while a change is saved.
className	string	–	Class on the outer element, for layout.