RadioGroup API

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.