Backstage UI

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

<RadioGroup label="Select an option">
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
</RadioGroup>

API reference#

RadioGroup#

Prop	Type	Default	Description
label	string	-	The visible label for the radio group.
aria-label	string	-	Accessible label when a visible label is not provided. Either label, aria-label, or aria-labelledby is required.
aria-labelledby	string	-	ID of an element that labels the radio group. Either label, aria-label, or aria-labelledby is required.
secondaryLabel	string	-	Secondary label text. Defaults to Required when isRequired is true.
description	string	-	Helper text displayed below the label.
orientation	horizontalvertical	vertical	The axis the radio buttons should align with.
value	string	-	The current value (controlled).
defaultValue	string	-	The default value (uncontrolled).
onChange	(value: string) => void	-	Handler called when the value changes.
name	string	-	The name of the radio group for form submission.
isDisabled	boolean	-	Whether all radio buttons in the group are disabled.
isReadOnly	boolean	-	Whether the radio group is read-only.
isRequired	boolean	-	Whether a selection is required before form submission.
isInvalid	boolean	-	Whether the radio group is in an invalid state.
children	ReactNode	-
className	string	-	Additional CSS class name for custom styling.

Radio#

Prop	Type	Default	Description
value	string	-	The value of the radio button.
isDisabled	boolean	-	Whether this radio button is disabled.
children	ReactNode	-
className	string	-	Additional CSS class name for custom styling.

Examples#

Horizontal#

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