Toggle Form element that allows users to switch between two states, such as on and off.
For best accessibility:
Use role="switch" on the input so it represents on/off instead of checked/unchecked. Make sure to ALWAYS use a label wrapped around the toggle to ensure a more accessible target click area.
Properties Jump to heading
| Class / Token | Type | |
|---|---|---|
.prs-toggle |
Component | For <input> |
.prs-toggle-label |
Component | For <label> |
.prs-toggle-secondary |
Modifier | Secondary color variant |
.prs-toggle-accent |
Modifier | Accent color variant |
.prs-toggle-info |
Modifier | Red variant |
.prs-toggle-success |
Modifier | Green variant |
.prs-toggle-warning |
Modifier | Yellow variant |
.prs-toggle-danger |
Modifier | Red variant |
.prs-toggle-neutral |
Modifier | Gray variant |
.prs-toggle-sm |
Modifier | Small size |
.prs-toggle_focus |
State | Manually apply visual focus |
.prs-toggle_disabled |
State | Manually apply visual disabled |