Switch

Overview

Switch is built on @radix-ui/react-switch. Use it when toggling the control changes state right away - notifications on / off, dark mode, feature flags. For state that takes effect only on form submission, use Checkbox instead.

Two sizes - sm (compact) and default - are exposed via the size prop. The thumb consumes the size via a group-data-[size] selector so it stays proportional in both presets.

Preview

'use client';import { Label, Switch } from '@gremorie/rx-forms';export function SwitchPreview() {  return (    <div className="flex items-center gap-2">      <Switch id="sw-demo" defaultChecked />      <Label htmlFor="sw-demo">Stream tokens</Label>    </div>  );}

Anatomy

Switch   pill track with a sliding thumb; toggles state on click

Installation

Usage

import { Label, Switch } from "@gremorie/rx-forms";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="notifications" defaultChecked />
      <Label htmlFor="notifications">Push notifications</Label>
    </div>
  );
}

API

<Switch>

Forwards to SwitchPrimitive.Root. Renders an internal SwitchPrimitive.Thumb that translates on data-state=checked.

Composition

1. Always pair with a <Label> via htmlFor matching the switch's id.
2. Use a wrapper with flex items-center gap-2 (or justify-between for settings rows where the label sits on one side and the switch on the other).
3. For form-bound boolean values that take effect on submit, prefer Checkbox instead.

Variations

Settings row

The canonical pattern for settings pages - label on the left, switch on the right, both vertically centered.

<div className="flex items-center justify-between rounded-md border p-4">
  <div className="grid gap-0.5">
    <Label htmlFor="dark-mode">Dark mode</Label>
    <p className="text-sm text-muted-foreground">
      Use a dark theme across the app.
    </p>
  </div>
  <Switch id="dark-mode" defaultChecked />
</div>

Sizes

Two presets: sm for dense surfaces (sidebars, mini-toolbars, table cells) and default for standard settings rows.

'use client';import { Label, Switch } from '@gremorie/rx-forms';export function SwitchSizesPreview() {  return (    <div className="flex items-center gap-6">      <div className="flex items-center gap-2">        <Switch id="sw-sm" size="sm" defaultChecked />        <Label htmlFor="sw-sm">Small</Label>      </div>      <div className="flex items-center gap-2">        <Switch id="sw-default" size="default" defaultChecked />        <Label htmlFor="sw-default">Default</Label>      </div>    </div>  );}

Disabled

disabled blocks interaction and drops opacity to 50%. The checked state stays visible so users can tell what the locked value is.

'use client';import { Label, Switch } from '@gremorie/rx-forms';export function SwitchDisabledPreview() {  return (    <div className="flex flex-col gap-3">      <div className="flex items-center gap-2">        <Switch id="sw-disabled-off" disabled />        <Label htmlFor="sw-disabled-off">Disabled, off</Label>      </div>      <div className="flex items-center gap-2">        <Switch id="sw-disabled-on" disabled defaultChecked />        <Label htmlFor="sw-disabled-on">Disabled, on</Label>      </div>    </div>  );}

Controlled with optimistic update

For settings that hit the network, flip the switch optimistically and roll back on error.

function NotificationToggle() {
  const [enabled, setEnabled] = React.useState(false);

  async function handleToggle(next: boolean) {
    setEnabled(next);
    try {
      await api.updateNotifications(next);
    } catch {
      setEnabled(!next);
      toast.error('Could not update notifications.');
    }
  }

  return (
    <div className="flex items-center gap-2">
      <Switch
        id="email-notifications"
        checked={enabled}
        onCheckedChange={handleToggle}
      />
      <Label htmlFor="email-notifications">Email notifications</Label>
    </div>
  );
}

Accessibility

• ARIA: Radix renders role="switch" with aria-checked reflecting the state. Screen readers announce the control as "switch" plus the current state.
• Keyboard: Space toggles the switch; Tab / Shift+Tab move focus.
• Label association: clicking the <Label> toggles the switch via standard htmlFor semantics.
• Disabled: disabled removes the switch from the tab order, dims the surface, and propagates fade to the linked label via peer-disabled.
• Distinction from Checkbox: Switch is for immediate state changes ("now"); Checkbox is for state captured on form submit ("on submit"). This affects both semantics and user expectations.

Related

• Checkbox - form-submission counterpart
• Toggle - press-button (text/icon affordance) for stateful actions
• Label - the canonical companion
• Form - wire Switch into react-hook-form