RadioGroup API
API reference docs for theRadioGroupcomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
children | ReactNode | The Radio components to be included in the group. | |
description? | ReactNode | Helpful text that appears below the legend to provide additional information or instructions about the radio options. | |
errorMessage? | ReactNode | Text that appears when there's an error, such as when a required selection hasn't been made. Adds red styling to highlight the issue. | |
id? | string | A unique identifier for the radio group, useful for accessibility and form handling. | |
isRequired? | boolean | When true, indicates that the user must select one of the radio options before submitting the form. | false |
legend | ReactNode | The title or heading for the radio group that explains what the options are for. | |
orientation? | 'horizontal' | 'vertical' | Controls how the radio buttons are arranged - either side-by-side (horizontal) or stacked (vertical). | 'vertical' |
isDisabled? | boolean | Makes all radio buttons non-clickable when set to true. Can also be a function that decides which options should be disabled based on their value. | false |
name | string | A required field that groups the radio buttons together so only one can be selected at a time. Important for form submission. | |
onBlur? | (selectedValue: string) => void | A function that runs when the user clicks or tabs away from a radio button, receiving the currently selected value. | |
onChange | (selectedValue: string) => void | A required function that runs whenever the user selects a different radio option, receiving the newly selected value. | |
size? | 'standard' | 'large' | Controls the size of all radio buttons in the group - either normal sized or larger for better visibility. | 'standard' |
value | string | The currently selected radio button's value. Required to make this a controlled component. |
Note: The RadioGroup component inherits several props from the Fieldset component and combines them with radio-specific functionality to create accessible form controls.