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

Usage#

import { RadioGroup } from '@backstage/ui';

<RadioGroup />

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="What is your favorite pokemon?"
  orientation="horizontal"
>
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander">Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>

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="What is your favorite pokemon?" 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="What is your favorite pokemon?">
  <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
  label="What is your favorite pokemon?"
  name="pokemon"
  defaultValue="charmander"
  validationBehavior="aria"
  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="What is your favorite pokemon?"
  isReadOnly
  defaultValue="charmander"
>
  <Radio value="bulbasaur">Bulbasaur</Radio>
  <Radio value="charmander">Charmander</Radio>
  <Radio value="squirtle">Squirtle</Radio>
</RadioGroup>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-RadioGroup
bui-RadioGroupContent
bui-Radio

Changelog#

0.6.0 - New RadioGroup + Radio component. #30327