Radio #

Radios are used when only one choice may be selected in a series of options.

Import #

• Radio A radio button is a checkable input that when associated with other radio buttons, only one of which can be checked at a time.
• RadioGroup Radio Group allow users to select a single option from a list of mutually exclusive options.

Examples #

Basic #

Disabled and read only #

Use the disabled property to disable radio buttons, or the readOnly property to set them to read-only state.

Colors #

Set radio button colors using the color property.

Radio Group #

Use the <RadioGroup> component to group multiple radio buttons together and set a group name with the name property.

Inline layout #

Use the inline property to arrange radio buttons horizontally within a group.

Controlled Radio Group #

Implement controlled usage of radio groups with the value and onChange properties.

Accessibility #

ARIA properties #

• RadioGroup role is radiogroup.
• Each Radio role is radio.
• If a Radio is checked, aria-checked is set to true.
• If a Radio is disabled, aria-disabled is set to true.

Keyboard interaction #

• → - Move focus to the next radio button. If focus is on the last radio button in the group, move to the first radio button.
• ← - Move focus to the previous radio button. If focus is on the first radio button in the group, move to the last radio button.

Props #

<Radio> #

Property	Type (Default)	Description	Version
as	ElementType(div)	Custom element type for the component
checked	boolean	Specifies whether the radio is selected
color	Color	The color of the radio when checked
defaultChecked	boolean	Specifies the initial state: whether or not the radio is selected
disabled	boolean	The disable of component
inline	boolean	Inline layout
inputProps	object	Attributes applied to the input element
inputRef	ref	Pass a ref to the input element.
name	string	Name to use for form
onChange	(value: string, checked: boolean, event) => void	Callback function that has been checked for changes in state
value	string	Value, corresponding to the value of the Radiogroup, to determine whether the

<RadioGroup> #

Type definitions #

Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';