<Switch>
A headless Switch (toggle) component for ReactLynx. It provides unstyled primitives for toggle states.
Basic Usage
The basic usage of <Switch>
Theme Control
Use a controlled Switch (checked + onChange) to drive page theme, and let token changes update the Switch visuals automatically. The example also shows a composed ThemedSwitch wrapper alongside part-level primitives; see Styling & Theming.
Structure
API
SwitchTrack
The track of the Switch. Represents the background area on which the thumb slides. Can also be used for pressed overlays or state decorations.
childreniOSAndroid
Content slot of the track.
Allows custom elements, can be used to add overlays or state decorations.
classNameiOSAndroidHarmony
className
styleiOSAndroidHarmony
style
SwitchThumb
The thumb of the Switch. The draggable/clickable handle that toggles the state.
childreniOSAndroid
Content slot of the thumb.
Allows custom elements such as icons.
classNameiOSAndroidHarmony
className
styleiOSAndroidHarmony
style
Switch
Props for the Switch component.
checkediOSAndroid
Whether the Switch is checked.
If
checked is provided, the component is controlled and defaultChecked is ignored.classNameiOSAndroidHarmony
className
defaultCheckediOSAndroid
The initial checked state when used as an uncontrolled component.
disablediOSAndroid
Whether the user can interact with the Switch.
When
true, the Switch cannot be toggled.onChangeiOSAndroid
Callback fired when the checked state changes.
styleiOSAndroidHarmony
style
switchPropsiOSAndroid
Switch supports original view props to be directly spread in this prop.
childreniOSAndroid
Content displayed inside or next to the Switch.
State-based styling & rendering
This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:
- CSS className — a class like
ui-<state>is toggled on the root node, so you can style it with selectors such as.ui-<state> { ... }. - Render-prop field — when
childrenis a function, the same state is passed in viachildren({ <state>: boolean, ... })for runtime-driven rendering.
ui-checked
Whether the Switch is currently checked.
Applied when `status.checked` is true.
ui-active
Whether the Switch is active (pressed or being interacted with).
Applied when `status.active` is true.
ui-disabled
Whether the Switch is disabled.
Applied when `status.disabled` is true.