Switch
A tactile binary setting whose thumb tracks the state.
Live — this one is real
Usage
import { Switch } from "mizu-ui";
export function Example() {
return (
<Switch label="Email notifications" name="notifications" defaultChecked />
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect forms/Fields.tsx
Source is included in the npm package under src/forms/Fields.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Setting name. |
| ...input | InputHTMLAttributes | — | Native checked/defaultChecked, disabled, onChange and ref. |
Accessibility
A native checkbox with role=switch. Space toggles; visible focus follows the thumb.
Motion
CSS transitions explain state changes. Reduced motion removes travel.