Switch

The Switch component provides a toggle control for binary on/off settings.

Preview

On

Off

Disabled

Import

import { Switch } from 'meridian';

Props

This component has no custom props. It accepts all standard HTML attributes for its base element.

Usage

Basic

<Switch />

With Label

Always pair switches with labels for accessibility:

<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Controlled

const [enabled, setEnabled] = useState(false);

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

Default Checked

<Switch defaultChecked />

Default On

Feature enabled by default

Disabled

<Switch disabled />
<Switch disabled defaultChecked />

Disabled States

Disabled off

Disabled on

Settings Example

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Switch id="dark-mode" />
    <Label htmlFor="dark-mode">Dark mode</Label>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Switch id="auto-save" defaultChecked />
    <Label htmlFor="auto-save">Auto-save</Label>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Switch id="analytics" />
    <Label htmlFor="analytics">Usage analytics</Label>
  </div>
</div>