Switch
An on and off setting that takes effect at once, with no save button. For a choice saved with a form, use Checkbox.
- Switch
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Switch
Pauses the animations and transitions of the app.
Dark theme, Switch
Pauses the animations and transitions of the app.
High contrast theme, Switch
Pauses the animations and transitions of the app.
UsageLink to the section Usage
import { Switch } from '@skribly/ui/forms'<Switch defaultSelected onChange={setOn}>Sound on finish</Switch>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- It is announced as a switch with its on or off state.
- The knob moves and shows a tick when on, so the state is a position and a glyph.
- Forced colours keep the knob in system colours.
This demo runs through axe in all three themes on every test run. See what the tests check.