Switch

A switch with controlled and uncontrolled modes, role="switch" semantics and Space / Enter toggling.

Installation

Add component

pnpm dlx @elyri/cli@latest add switch

Examples

Basic

Two labelled switches, one of them on by default.

Email notifications

Product updates

import { Switch } from './components/elyri/Switch';

export function Example() {
  return (
    <div className="demo-stack">
      <div className="demo-ui-switch-row">
        <span>Email notifications</span>
        <Switch defaultChecked aria-label="Email notifications" />
      </div>
      <div className="demo-ui-switch-row">
        <span>Product updates</span>
        <Switch aria-label="Product updates" />
      </div>
    </div>
  );
}

Sizes

Two sizes: sm / md.

Small

Medium

import { Switch } from './components/elyri/Switch';

export function Example() {
  return (
    <div className="demo-stack">
      <div className="demo-ui-switch-row">
        <span>Small</span>
        <Switch size="sm" defaultChecked aria-label="Small" />
      </div>
      <div className="demo-ui-switch-row">
        <span>Medium</span>
        <Switch size="md" defaultChecked aria-label="Medium" />
      </div>
    </div>
  );
}

Disabled

Both the on and off disabled states.

Off

import { Switch } from './components/elyri/Switch';

export function Example() {
  return (
    <div className="demo-stack">
      <div className="demo-ui-switch-row">
        <span>On</span>
        <Switch defaultChecked disabled aria-label="On" />
      </div>
      <div className="demo-ui-switch-row">
        <span>Off</span>
        <Switch disabled aria-label="Off" />
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled value; omit it to run uncontrolled
`defaultChecked`	`boolean`	`false`	Initial value when uncontrolled
`onCheckedChange`	`(checked: boolean) => void`	—	Called on every change, controlled or not
`size`	`'sm' \| 'md'`	`'md'`	Control size: sm / md
`disabled`	`boolean`	`false`	Whether the switch is disabled
`...rest`	`ButtonHTMLAttributes`	—	Remaining props are forwarded to the native button