Background sync
- Keep this device up to date
Documents will sync in the background.
Android switch
A Material switch with a 52-by-32 track and an expanding thumb, built on a native checkbox.
Preview
In action
When to use
Use it for
- A binary Android preference that takes effect immediately.
Not for
- Selecting one option from a mutually exclusive group.
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 { AndroidSwitch } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-switch.
2. Vendor the source
npx @noorddev/vlak-cli add android-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/android-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 { AndroidSwitch } from "@noorddev/vlak-react";
<label htmlFor="sync">Background sync</label>
<AndroidSwitch id="sync" name="sync" checked={enabled} onCheckedChange={setEnabled} />Props
AndroidSwitch
| Prop | Type | Default | Description |
|---|---|---|---|
onCheckedChange | (checked: boolean) => void |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the switch when enabled. |
| Space | Toggles the switch. |
Accessibility
- Uses a native checkbox with role switch and a 52-by-48 target.
- Associate a visible label using htmlFor, or provide aria-label.
- Supports native names, values, required state, disabled state and form reset.
- The thumb changes position and size in addition to the filled track.
Markup
<label for="android-sync">Background sync</label> <input class="rs-android-switch rs-android-switch-checked" id="android-sync" name="sync" type="checkbox" role="switch" checked aria-checked="true" />
Classes
.rs-android-switch.rs-android-switch-checked