[ @sdxc/ui ]

Switch

A native checkbox styled and wired as an on/off switch.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

Notifications

Choose what we email you about.

Incident alertsEmail the on-call address the moment a monitor goes down.

Weekly digestOne summary every Monday with uptime and response times.

Product newsOccasional notes about new features. No more than once a month.

View code

<Card>
	<Card.Header>
		<Card.Title>Notifications</Card.Title>
		<Card.Description>Choose what we email you about.</Card.Description>
	</Card.Header>
	<Card.Content>
		{preferences.map((preference) => (
			<label
				key={preference.name}
				htmlFor={`preview-switch-${preference.name}`}
				mix={[hstack({ gap: 4, align: "start", justify: "between" })]}
			>
				<span mix={[vstack({ gap: 1, align: "start" })]}>
					{preference.label}
					<Text>{preference.description}</Text>
				</span>
				<Switch
					id={`preview-switch-${preference.name}`}
					name={preference.name}
					defaultChecked={preference.defaultChecked}
					mix={[ariaChecked()]}
				/>
			</label>
		))}
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

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

Renders a single <input type="checkbox" role="switch">. It carries no aria-checked because an authored value would go stale the instant the switch is flipped; the live control's own checkedness is what persists.

Examples

Announced state

View code

<Switch aria-label="Push notifications" name="push" mix={[ariaChecked()]} />

Caption before the switch

Email me when a deploy fails

View code

<Label>
	Email me when a deploy fails
	<Switch name="deployAlerts" defaultChecked />
</Label>

Locked on

Dark mode is set for everyone in the Acme organization.

View code

<div mix={[hstack({ gap: 3, align: "center" })]}>
	<Switch aria-label="Dark mode" checked disabled />
	<Text>Dark mode is set for everyone in the Acme organization.</Text>
</div>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`children?`	`RemixNode`	Visible label text rendered after the track, inside the same native `<label>` wrapping both, so clicking either half toggles the switch with no separate `htmlFor`/`id` pairing required.

Also accepts everything in Omit<TagProps<"input">, "type" | "role" | "aria-checked">.