1 viewer
Component · Input
Switch
Accessible binary toggle control.
- Category
- Input
- Slots
- 6
- States
- 4
- Writer
- Shared
Preview
<Switch
checked={true}
label="Realtime WebSocket Streaming (:8788)"
name="realtime_stream"
/>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-switch |
| label | .primitive-switch__label |
| input | .primitive-switch__input |
| text | .primitive-switch__text |
| help | .primitive-switch__help |
| error | .primitive-switch__error |
- Modifier
- primitive-switch--{state}
- State attribute
- data-statefrom the checkedState prop
- Role
- switch (on the input)
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-form-control | ready |
| terminal | terminal-form-control | planned |
| native | native-adapter | experimental |
Accessibility
Uses switch semantics with explicit label and state wiring.
- Checked and invalid states remain available to assistive tech.
- Label, help text, and error text are linked through ids.