Switch
Binary toggle with on/off semantics.
Preview
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Binary toggle with on/off semantics.
Usage
Compose Root, Thumb.
import * as Switch from "@solidiom/switch"
;<Switch.Root>Switch content</Switch.Root>Installation
Install the package with pnpm add @solidiom/switch. The package requires compatible solid-js and @solidjs/web peer dependencies.
Parts
Switch exposes 2 parts:
- Root —
data-part="root". - Thumb —
data-part="thumb".
Styling
Switch carries data-scope="switch" and data-part attributes on each part for CSS/recipe targeting. State attributes like data-state, data-disabled, and data-highlighted are exposed where applicable.
Keyboard & behavior
| Key | Behavior |
|---|---|
| Space | Toggles the switch between on and off. |
| Enter | Toggles the switch between on and off. |
SSR and hydration
Switch renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.