Switch
A two-state toggle that looks the same on iOS, Android, and web.
import Switch from "swshd/Switch";Switch is a controlled two-state toggle: value in, onValueChange out. The same switch on iOS, Android, and web.
Import swshd/Switch directly for app and dashboard settings.
Toggle the switch.
On, off, and both disabled.
Colors come from the active theme's roles via SWITCH_TOKENS: the track is accent.default on and fill.raised.default off; the thumb is text.primary on and text.muted off.
The thumb slides over motion.duration.base (180 ms) with motion.easing.inOut; reduced motion or automation drops the duration to zero.
import Switch from "swshd/Switch";
const [enabled, setEnabled] = useState(false);
<Switch value={enabled} onValueChange={setEnabled} />The web render is a real role="switch" checkbox, so focus and Space activation come from the browser; the track itself is also clickable. The accessible name is aria-label ?? accessibilityLabel ?? variant.
| Prop | Type | Default | Description |
|---|---|---|---|
value | boolean | — | Controlled on/off state. |
onValueChange | (value: boolean) => void | — | Fired on toggle. |
disabled | boolean | — | Fades the control and blocks toggles. |
loading | boolean | — | Blocks toggles and marks the control busy; shows a spinner on web. |
size | "default" | "small" | — | Compact web dashboard sizing. Native keeps the platform switch dimensions. |
variant | "Confirmation" | — | The switch family. |
aria-label | string | — | Accessible name on web (wins over accessibilityLabel). |
accessibilityLabel | string | — | Accessible name on native and web. |
style | StyleProp<ViewStyle> | — | Layout only. |
testID | string | — | data-testid on web. |