On this page
Toggles a setting on or off, and immediately saves the change
On this page
Uncontrolled with default value
Delayed toggle with loading state
With associated caption text
Left-aligned with label
|The id of the DOM node that describes the switch|
|The id of the DOM node that labels the switch|
|Uncontrolled - whether the switch is turned on|
|Whether the switch is ready for user input|
|Whether the switch's value is being calculated|
|Whether the switch is turned on|
(on: boolean) => void
|The callback that is called when the switch is toggled on or off|
(e: MouseEvent) => void
|The callback that is called when the switch is clicked|
'small' | 'medium'
|'medium'||Size of the switch|
'start' | 'end'
|'start'||<div>Whether the "on" and "off" labels should appear before or after the switch.</div> <div> <Text fontWeight="bold">This should only be changed when the switch's alignment needs to be adjusted.</Text> For example: It needs to be left-aligned because the label appears above it and the caption appears below it. </div>|
- Component props and basic example usage of the component are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component does not introduce any performance regressions.
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.