Checkbox

Use cases

Make sure the Checkbox 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, error).
• The icon prop is not supported.
• The size prop defaults to "medium", and does not support "small" or "large".
• The checkbox implementation and styling differ from the default svg approach and use custom pseudo-elements.
• The interactive hit area extends beyond the visual bounds of the checkbox. The additional hit area does not consume layout space, so be mindful when placing the checkbox next to adjacent elements or container boundaries.
• Includes full forced-colors support.

Examples

Checked

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

Indeterminate

Use the indeterminate prop to display the Checkbox in an indeterminate state.

Group

Group related Checkboxes using the FormGroup component. Render FormControl as a <fieldset> and FormLabel as a <legend> to label the group.

Error

Use the error prop on FormControl to display the FormHelperText in an error state. Consider adding a visually hidden “Error:” prefix to the FormHelperText if the error message is not clear on its own.

✅ Do

• Use a clear, descriptive label for each Checkbox.
• Group related Checkboxes into a <fieldset>, using a <legend> as a label for the group.
• Use Checkboxes inside a form that needs submission.

🚫 Don’t

• Don’t omit a programmatically associated label.
• Don’t use the checked state of one Checkbox to alter the checked state of others (don’t use Checkboxes as Radios).
• Don’t use a Checkbox when the effect of checking it is instantaneous (no confirmation or submission is required). Use Switch instead.