Switch

Switches toggle the state of a single item on or off.

Import

import { Switch } from '@md3-react/core';

Basic Usage

Live Editor

function Example() {
  const [enabled, setEnabled] = React.useState(false);
  return (
    <Demo>
      <label style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
        <span>Enable notifications</span>
      </label>
    </Demo>
  );
}

Result

Loading...

With Icons

Add icons to show the switch state visually:

Live Editor

function Example() {
  const [enabled, setEnabled] = React.useState(true);
  return (
    <Demo>
      <label style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <Switch 
          checked={enabled} 
          onChange={(e) => setEnabled(e.target.checked)}
          iconOn={<Check size={16} />}
          iconOff={<Close size={16} />}
        />
        <span>Dark mode</span>
      </label>
    </Demo>
  );
}

Result

Loading...

Disabled State

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '24px' }}>
    <Switch disabled aria-label="Disabled off" />
    <Switch disabled checked onChange={() => {}} aria-label="Disabled on" />
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state
disabled	boolean	false	Disables the switch
iconOn	ReactNode	-	Icon shown when checked
iconOff	ReactNode	-	Icon shown when unchecked
onChange	function	-	Called when state changes

Plus all standard <input type="checkbox"> HTML attributes.

Accessibility

• Uses role="switch" for proper semantics
• Has aria-checked attribute that reflects state
• Supports keyboard interaction (Space to toggle)