RadioGroup

A radio group allows a user to select a single item from a list of mutually exclusive options.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

API reference

Prop	Type	Default	Responsive
size	smallmedium	small	Yes
label	string	-	No
icon	ReactNode	-	No
description	string	-	No
name	string	-	No
className	string	-	No
style	CSSProperties	-	No

Examples

Horizontal

Here's a simple TextField with a description.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

<RadioGroup label="Label" orientation="horizontal" />

Disabled

You can disable the entire radio group by adding the isDisabled prop to the RadioGroup component.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

<RadioGroup label="Label" isDisabled>
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander">Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>

Disabled Single radio

You can disable a single radio by adding the isDisabled prop to the Radio component.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

<RadioGroup label="Label">
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander" isDisabled>Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>

Validation

Here's an example of a radio group with errors.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

Nice try!

<RadioGroup validate: value => (value === 'charmander' ? 'Nice try!' : null)>
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander">Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>

Read only

You can make the radio group read only by adding the isReadOnly prop to the RadioGroup component.

What is your favorite pokemon?

BulbasaurCharmanderSquirtle

<RadioGroup label="Label" isReadOnly>
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander">Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>