The RadioGroup component in React is used to present a set of mutually exclusive options, where only one option can be selected at a time. It is commonly used in forms and settings.

Function

The RadioGroup component helps achieve the following functions:

  • Single Selection: Ensures that only one option can be selected at a time, making it ideal for mutually exclusive choices.
  • Form Inputs: Commonly used in forms where users need to select from predefined options, such as survey questions or settings.
  • Custom UI Controls: Can be styled and customized to fit different design requirements and themes.

Props

The RadioGroup component accepts the following props to customize its behavior and appearance.

NameTypeDescription
childrennodeThe content of the component, typically a set of FormControlLabel elements.
defaultValueanyThe default value. Use when the component is not controlled.
namestringThe name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.
onChangefuncCallback fired when a radio button is selected.
rowboolIf true, the radio buttons will be arranged horizontally.
sizestringThe size of the component. One of: 'small', 'medium' (default).
valueanyValue of the selected radio button. The DOM API casts this to a string.

Best Practices
  • Single-choice only: Use RadioGroup when users must select just one option from a set. For multiple selections, use checkboxes instead.
  • Clear labeling: Provide short, descriptive labels for each radio option to help users understand their choices quickly.
  • Logical grouping: Visually and semantically group related radio options together to improve clarity and accessibility.
  • Default selection: Set a sensible default value to guide users and streamline their decision-making process.
  • Horizontal layout: Use the row prop for horizontal alignment when space is limited or when options are closely related.