Switch

Use cases

Make sure the Switch is suitable for your use case. There may be other, more appropriate components available.

Use case	Checkbox	Radio	Switch	ToggleButton
Confirm an input for a form submission	✅	❌	❌	❌
Select a single option from multiple choices for a form submission	❌	✅	❌	❌
Make an instantaneous, binary choice (switch a setting on or off)	❌	❌	✅	❌
Toggle an option within a toolbar	❌	❌	❌	✅

StrataKit MUI modifications

• The color prop is not supported. Color is determined automatically based on state (e.g., checked, disabled).
• The action, checkedIcon, icon, and LinkComponent props are not supported.
• Ripple effect removed. The centerRipple, disableRipple, disableFocusRipple, disableTouchRipple, focusRipple, TouchRippleProps and touchRippleRef props are not supported.
• Restyled using StrataKit’s visual language.
• Includes full forced-colors support.
• Added a checkmark on the thumb when checked to help further differentiate the checked and unchecked states.

Examples

Checked

Use the defaultChecked prop to set the initial checked state. Alternatively, use the checked and onChange props to control the checked state.

Sizes

• Small: Use in compact interfaces where space is limited.
• Medium: Default size, suitable for most use cases.

✅ Do

• Use a clear, descriptive label for each Switch.
• Use a Switch when the effect is instantaneous (no confirmation or submission is required).

🚫 Don’t

• Don’t use switches for mandatory actions. The checked state of a switch can never be invalid.
• Don’t use one switch to change multiple settings simultaneously.
• Don’t use switches inside a form that needs submission. Use Checkbox instead.

API reference

• Switch
• FormControl
• FormControlLabel