Switch

A binary on/off toggle for settings that take effect immediately.

When to use

Settings toggles — enable notifications, dark mode, feature flags.
Preferences — any boolean preference that applies instantly.

When NOT to use

For form fields that are submitted later — use Checkbox.
For choosing between multiple options — use radio buttons.

Import

import { Switch } from '@mihcm/ui/Switch';
import { Label } from '@mihcm/ui/Label';

Basic usage

const [enabled, setEnabled] = useState(false);
 
<div className="flex items-center gap-2">
  <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Switch is controlled-only. Pass checked and onCheckedChange from your state.

Sizes

Size	Track height	Use when
`sm`	20px	Dense settings panels.
`md`	24px	Default for most UIs.
`lg`	28px	Touch-friendly mobile settings.

Tones

Tone	Use when
`accent`	Default. MiHCM orange in the on state.
`primary`	MiHCM navy. When the toggle reads as a primary action.

Composition

Always pair with a Label — clicking the label toggles the switch.
Switch applies changes immediately (no submit button needed). For deferred changes, use Checkbox.
disabled prevents toggling and applies reduced opacity.
On native, renders a Switch component with accessibilityRole="switch".

Checkbox — for form fields submitted later.
Toggle — button-style toggle.
Label — always pair with Switch.