Skip to content
rdloom

Switch

Turns a setting on or off, taking effect immediately.

Inputv0.1.0experimentalWCAG 2.2 AAView spec
import { Switch } from "@rdloom/react";

export default function SwitchBasicExample() {
  return (
    <Switch defaultSelected>Email notifications</Switch>
  );
}

Installation

npx rdloom add switch

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes. It needs react-aria-components; add --install to install them.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/switch.json

Works, but without upgrade tracking.

Usage

import { Switch } from "@rdloom/react";

<Switch defaultSelected>Email notifications</Switch>

Sizes

import { Switch } from "@rdloom/react";

export default function SwitchSizesExample() {
  return (
    <div className="flex flex-col gap-3">
      <Switch size="sm">Compact mode</Switch>
      <Switch size="md">Dark mode</Switch>
    </div>
  );
}

Disabled

import { Switch } from "@rdloom/react";

export default function SwitchDisabledExample() {
  return (
    <div className="flex flex-col gap-3">
      <Switch isDisabled>Auto-update</Switch>
      <Switch isDisabled defaultSelected>
        Backups
      </Switch>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
childrenrequired

Visible label describing the setting.

nodenone
isSelected

Controlled on/off state.

booleannone
defaultSelected

Initial state when uncontrolled.

booleanfalse
size

Track and thumb size.

"sm" | "md""md"
isDisabled

Prevents interaction and dims the switch.

booleanfalse
onChange

Called with the new state.

(isSelected: boolean) => voidnone

Accessibility

Role switch, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

  • Space toggles

Screen readers announce

  • Announced as a switch (or toggle button) with its label and on or off
  • Toggling announces the new state

What your code must do

  • Label is part of the click target
  • State is not conveyed by color alone (thumb position also changes)

Guidelines

Use it when

  • Settings that apply instantly, like dark mode or notifications

Avoid it when

  • Choices that only apply after pressing Save: use Checkbox

Don't

  • Labels that change with the state, like 'On'/'Off'

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-action-primary
  • --rd-color-border-strong
  • --rd-color-surface-default
  • --rd-color-text-default
  • --rd-color-focus-ring