# Switch

Source: https://design.ritchiebros.com/components/inputs/switch/

A switch toggles a single setting on or off. It takes effect immediately, so use it for options that don’t require a separate save step.

## Figma

The Figma reference for **Switch** will appear here once the design link is added.

## Storybook

Interactive examples for **Switch** will render here once the Storybook link is wired in.

## Best practices

- Use a switch for an immediate on/off setting; use a checkbox when the choice is confirmed later by a submit action.
- Always provide a clear label describing what the switch controls.
- Frame the label positively so “on” is the affirmative state.
- Avoid needing help text to explain what on and off mean.

## Do’s and don’ts

**Do:** Use a switch for a setting that applies the moment it changes.

**Don’t:** Use a switch inside a form that only takes effect after the person presses “Save”.

## Accessibility

- The switch exposes its checked state to assistive technology and is toggled with Space or Enter when focused.
- Associate a visible label with the control so its purpose is announced.

## Related components

- [Checkbox](https://design.ritchiebros.com/components/inputs/checkbox/)
- [ToggleButton](https://design.ritchiebros.com/components/inputs/toggle-button/)