A quiet moment
Focus
Keep notifications quiet
Notifications are quiet.
iOS switch
A native checkbox with a 64px pill track, translating thumb and a 44px hit height.
Preview
In action
When to use
Use it for
- An immediately applied on/off preference.
- Associate it with a visible label or an aria-label.
Not for
- A choice among several alternatives; use the iOS segmented control.
- A submit command that needs a button.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { IOSSwitch } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-switch.
2. Vendor the source
npx @noorddev/vlak-cli add ios-switch
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/ios-switch.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { IOSSwitch } from "@noorddev/vlak-react";
<IOSSwitch name="wifi" aria-label="Wi-Fi" defaultChecked onCheckedChange={checked => console.log(checked)} />Props
IOSSwitch
The native checkbox owns focus, form submission and Space activation.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | ||
defaultChecked | boolean | false | |
onCheckedChange | (checked: boolean) => void |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Moves focus to or away from an enabled switch. |
| Space | Toggles the native checkbox. |
Accessibility
- A native checkbox with switch semantics retains form submission, required and disabled behavior.
- Fill and thumb position both communicate state. Reduced motion removes thumb travel; forced colors keeps the boundary visible.
Markup
<span class="rs-ios-switch"><span class="rs-ios-switch-track" aria-hidden="true"></span><span class="rs-ios-switch-thumb" aria-hidden="true"></span><input class="rs-ios-switch-input" type="checkbox" role="switch" aria-label="Wi-Fi" /></span>
Classes
.rs-ios-switch.rs-ios-switch-disabled.rs-ios-switch-track.rs-ios-switch-on.rs-ios-switch-thumb.rs-ios-switch-thumb-on.rs-ios-switch-input