Radio

Use cases

Make sure the Radio is suitable for your use case. There may be other, more appropriate components available. The differences between Checkboxes and Radios are clear when used in groups:

Use case	Checkboxes	Radios	Select	ToggleButtons
Choose one or more inputs	✅	❌	❌	❌
Choose just one of a few inputs	❌	✅	✅	❌
Choose just one of many inputs	❌	❌	✅	❌
Toggle one or more options 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 size prop defaults to "medium" and does not support "small".
• The radio 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 radio. The additional hit area does not consume layout space, so be mindful when placing the radio next to adjacent elements or container boundaries.
• Includes full forced-colors support.

Examples

Default value

Use the defaultValue prop of the RadioGroup component to define which radio button is selected initially. Alternatively, use the value and onChange props to control the value state.

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 Radios where there is only a handful of input options on offer.
• Use Radios where there is only one correct answer, such as in a test.
• Group the Radio options using a <fieldset> and label the group using a <legend>. Make sure role="radiogroup" is set on the <fieldset> element rather than on the RadioGroup component.
• Use a clear, descriptive label for each Radio.

🚫 Don’t

• Don’t use one Radio in isolation. For a single option, use Checkbox.
• Don’t add tabindex="0" to Radios. Only the checked/selected Radio should be focusable using the Tab key.
• Don’t use Radios where there are many options, such as choosing a country. Use Select or Autocomplete instead.