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 #

Colors #

Radio Group #

Radio Group - Inline layout #

Radio Group - Picker #

Controlled Radio Group #

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
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> #

ts:Color #

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