Miltinson.Design system
GitHub

Switch

Switch-role toggle with a labelled click target.

atomsSource
import { Switch } from '@elirobinson/react/components/atoms/Switch';

Styles: @elirobinson/react/styles/atoms/Switch.css — already included when you import @elirobinson/react/styles.css.

Show code
import { Switch } from '@elirobinson/react/components/atoms/Switch';

export default function Basic() {
  return <Switch label="Email notifications" />;
}

When to use it

Use Switch for a setting that takes effect immediately, with no submit step — a notification preference, a feature flag. Use Checkbox instead when the choice is part of a form that gets submitted together.

States

Show code
import { Switch } from '@elirobinson/react/components/atoms/Switch';

export default function States() {
  return (
    <div className="demo-col">
      <Switch label="Off by default" />
      <Switch label="On by default" defaultChecked />
      <Switch label="Disabled" disabled />
      <Switch label="Disabled and on" disabled defaultChecked />
    </div>
  );
}

Controlled

Under the hood it's still a checkbox — checked and onChange work exactly as they would on a plain <input type="checkbox">.

Your plan renews automatically.

Show code
import { useState } from 'react';

import { Switch } from '@elirobinson/react/components/atoms/Switch';

export default function Controlled() {
  const [autoRenew, setAutoRenew] = useState(true);

  return (
    <div className="demo-col">
      <Switch
        label="Auto-renew"
        checked={autoRenew}
        onChange={(event) => setAutoRenew(event.target.checked)}
      />
      <p>{autoRenew ? 'Your plan renews automatically.' : 'Your plan ends after this period.'}</p>
    </div>
  );
}

Props

PropTypeDefaultDescription
labelrequiredstring——

Also accepts all Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> props.

Accessibility

  • Renders <input type="checkbox" role="switch"> paired with a <label> — label is required and is the input's only accessible name.
  • role="switch" changes how assistive tech announces state ("on"/"off" instead of "checked"/"unchecked"), but the element underneath is a real checkbox, so checked, defaultChecked, and onChange all behave exactly as they do on Checkbox.
  • Keyboard: Tab focuses, Space toggles — native input behavior.
  • role is fixed: the type omits it from the props you can pass, so switch can't be overridden.
  • The ref forwards to the underlying <input>.

Do

  • Use Switch for settings that take effect immediately — no save step, no form submit.
  • Always pass a real label; it’s required and the input’s only accessible name.
  • Use defaultChecked for uncontrolled or checked + onChange for controlled — same contract as a native checkbox.

Don't

  • Use Switch when the choice only takes effect after a form submit — that’s Checkbox.
  • Try to override role — the type omits it; switch is the fixed contract.
  • Phrase the label as a question ("Enable X?") — a switch is a state, name the setting itself ("Email notifications").