Switch
Turns a setting on or off, and takes effect at once.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- For a choice that is applied later, with a form, use a Checkbox.
- The track holds 3:1 contrast against the page when off, so the control is visible before it is on.
Example
Section titled “Example”import { Switch } from "@acme/ui";
<Switch label="Notifications" checked={on} onChange={setOn} />Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
checked |
boolean |
Required. |
onChange |
(checked: boolean) => void |
Required. |
label |
string |
Shown beside the switch. Pressing it toggles too. |
aria-label |
string |
Names the switch when there is no visible label. |
disabled |
boolean |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Switch.tsx |
| Desktop (GPUI) | crates/acme-ui/src/controls.rs |
| React Native | packages/ui-native/src/Switch.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Switch.kt |