Forms & Inputs·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Enable notificationsAuto-savePro features (disabled)

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Enable feature

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

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

export const Notifications = () => {
  const [on, setOn] = useState(true);
  return <Switch checked={on} onChange={setOn} aria-label="Notifications" />;
};

Sizes

`sm`/`md`/`lg` control the track and thumb dimensions.

example.tsxtsx

size="sm"

size="md" (default)

size="lg"

API

Prop	Type	Default	Description
checked*	boolean	—	Current checked state. Always controlled.
onChange	(checked: boolean) => void	—	Called with the new checked value when the user toggles the switch.
color	"neutral" \| "primary" \| "success" \| "error" \| "warning" \| "info"	"primary"	Semantic color used when checked.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Switch dimensions.
disabled	boolean	false	Disables interaction and applies the disabled visual.
aria-label	string	—	Accessible name; required when no visible label is rendered alongside the switch.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Switch WAI-ARIA design pattern.

Renders as a native <button> with role="switch"; aria-checked reflects checked.
aria-disabled mirrors disabled, and the switch is removed from the tab order (tabIndex={-1}) while disabled.
aria-label is required when no adjacent visible label exists.
The visual toggle thumb is aria-hidden so only the switch state is announced.

Keyboard interactions

Key	Action
`Space`	Toggles the switch.
`Enter`	Toggles the switch.
`Tab`	Moves focus to the next focusable element.

Need more?View on npm →