imitation
Switch
An instant on and off.
SwitchOn and off
In context
SettingsEach row is one setting, applied at once
Loading
Switch, loadingWaits for an async change; a rejection reverts
- Remind me dailyOff by default. One notification a day; tapping it opens Today.
The switch shows a spinner for a second, then settles.
Pending change and a permission errorIn context: the second switch reverts when Android refuses
Your Profile
Daily readings reminder
- Remind me dailyOff by default. One notification a day; tapping it opens Today.
- Time8:00 AM
One notification a day; tapping it opens Today.
Your Profile
Daily readings reminder
- Remind me dailyOff by default. One notification a day; tapping it opens Today.
Notifications are blocked
Allow Athic in Android settings, then try again.
Sizing tokens
TokensWidth, height, padding, thumb size and travel, track colours, shadow: --rebar-switch-*.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
thumbIcon | ReactNode | No | — |
loading | boolean | undefined | No | — |
onChange | ((checked: boolean) => void | Promise<void>) | undefined | No | — |
size | "md" | "lg" | undefined | No | — |
asChild | boolean | undefined | No | — |
Accessibility
A real Radix role="switch" button: Space or Enter toggles, aria-checked follows checked. It has no label of its own, so wrap it in a <label> or pass aria-label. Use Switch for a setting that applies at once; a Checkbox for a choice submitted with a form.
data-rebar-* attributes
data-rebar-component="switch" on the root; data-rebar-part="thumb" and "thumb-icon"; Radix sets data-state.
Migrating to Ant Design
AntD's Switch takes the same checked/onChange shape: a close, low-risk rename.