RadioGroup

Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.

install	`yarn add @react-spectrum/radio`
version	3.0.0-rc.1
usage	`import {Radio,RadioGroup} from '@react-spectrum/radio'`

View guidelines

Spectrum

Example#

<RadioGroup label="Favorite pet">
 <Radio value="dogs">Dogs</Radio>
 <Radio value="cats">Cats</Radio>
</RadioGroup>

Favorite pet

DogsCats

Content#

RadioGroup accepts multiple Radio elements as children. Each Radio represents an option that can be selected, labeled by its children.

Note: A Radio must be contained within a RadioGroup. If for whatever reason you need to have a single radio by itself, wrap it in a RadioGroup.

Value#

RadioGroup only allows single selection. An initial, uncontrolled value can be provided to the RadioGroup using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

Accessibility#

For accessibility, all Radio elements within a RadioGroup automatically receive an aria-checked attribute reflecting their individual selection status.

<RadioGroup label="Uncontrolled" defaultValue="dragon">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

<RadioGroup label="Controlled" value="dragon">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Uncontrolled

WizardDragon

Controlled

WizardDragon

Labeling#

When a visible label isn't being used an aria-label prop is needed to explicitly set the label for the RadioGroup. Radio elements should always have a visible label.

<RadioGroup aria-label="Favorite Avatar">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

WizardDragon

Internationalization#

To internationalize a RadioGroup, a localized string should be set as the child content of the Radio. For languages that are read right to left (e.g. Hebrew and Arabic), the Radio is placed on the right side of the text.

Events#

RadioGroup accepts an onChange prop, which is triggered when a user changes the selected value. The example below uses onChange to log how the user is interacting with the component.

function Example() {
  let [selected, setSelection] = React.useState('select me');

  return (
    <div>
      <div>You have selected: {selected}</div>
      <RadioGroup aria-label="Favorite Avatar" onChange={value => setSelection(value)}>
       <Radio value="wizard">
         Wizard
       </Radio>
       <Radio value="dragon">
         Dragon
       </Radio>
      </RadioGroup>
    </div>
  );
}

You have selected: select me

WizardDragon

Validation#

RadioGroups can display a validation state to communicate to the user if the current value is invalid. Implement your own validation logic in your app and pass "invalid" to the RadioGroup via the validationState prop.

<RadioGroup label="Example Options" validationState="invalid">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

RadioGroup Props#

Name	Type	Default	Description
`orientation`	`Orientation`	`'vertical'`	The axis the Radio Button(s) should align with.
`isEmphasized`	`boolean`	—	By default, radio buttons are not emphasized (gray). The emphasized (blue) version provides visual prominence.
`children`	`ReactElement< RadioProps> \|`	—
`name`	`string`	—
`value`	`string`	—	The current value (controlled).
`defaultValue`	`string`	—	The default value (uncontrolled).
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`validationState`	`ValidationState`	`"valid"`	Whether the input should display its "valid" or "invalid" visual styling.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render
`label`	`ReactNode`	—	The content to display as the label.
`labelPosition`	`LabelPosition`	`"top"`	The label's overall position relative to the element it is labeling.
`labelAlign`	`Alignment`	`"start"`	The label's horizontal alignment relative to the element it is labeling.
`necessityIndicator`	`NecessityIndicator`	`"icon"`	Whether the required state should be shown as an icon or text.
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—

Events

Name	Type	Default	Description
`onChange`	`(value: string) => void`	—	Handler that is called when the value changes.
`onFocus`	`(e: FocusEvent) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`(e: FocusEvent) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`(isFocused: boolean) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is released.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—
`slot`	`string`	—

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`role`	`string`	—
`id`	`string`	—
`tabIndex`	`number`	—
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-owns`	`string`	—	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
`aria-hidden`	`boolean \| 'false' \| 'true'`	—	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

'horizontal' | 'vertical'

Name	Type	Description
`value`	`string`
`children`	`ReactNode`	The label for the Radio. Accepts any renderable node.
`isDisabled`	`boolean`	Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
`autoFocus`	`boolean`	Whether the element should receive focus on render
`onFocus`	`(e: FocusEvent) => void`	Handler that is called when the element receives focus.
`onBlur`	`(e: FocusEvent) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`(isFocused: boolean) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`(e: KeyboardEvent) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`(e: KeyboardEvent) => void`	Handler that is called when a key is released.

ReactFocusEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

ReactKeyboardEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

'valid' | 'invalid'

'top' | 'side'

'start' | 'end'

'icon' | 'label'

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number

Radio Props#

Name	Type	Default	Description
`value`	`string`	—
`children`	`ReactNode`	—	The label for the Radio. Accepts any renderable node.
`isDisabled`	`boolean`	—	Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—

Events

Name	Type	Default	Description
`onFocus`	`(e: FocusEvent) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`(e: FocusEvent) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`(isFocused: boolean) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is released.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—
`slot`	`string`	—

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`role`	`string`	—
`id`	`string`	—
`tabIndex`	`number`	—
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-owns`	`string`	—	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
`aria-hidden`	`boolean \| 'false' \| 'true'`	—	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

ReactFocusEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

ReactKeyboardEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number

Visual Options#

Orientation#

A RadioGroup is vertically aligned by default. An optional prop can be passed to the RadioGroup to position the Radio elements inline.

<RadioGroup label="Example Options" orientation="horizontal">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

Label Position#

The default position of a label is on top of the RadioGroup. An optional prop can be passed to the RadioGroup that will position the label at the start of the topmost Radio.

<RadioGroup label="Example Options" labelPosition="side">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

Label Align#

Labels can be aligned to the "start" or the "end" of the RadioGroup. For left-to-right (LTR) languages, "start" refers to the left most edge of the RadioGroup and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.

<RadioGroup label="Example Options" labelAlign="end">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

Disabled#

View Guidelines

<RadioGroup label="Example Options" isDisabled>
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

<RadioGroup label="Example Options">
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon" isDisabled>Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

Read Only#

The isReadOnly prop makes the selection immutable. Unlike isDisabled, the RadioGroup remains focusable. See the MDN docs for more information.

<RadioGroup label="Example Options" defaultValue="wizard" isReadOnly>
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon

Emphasized#

View Guidelines

<RadioGroup label="Example Options" isEmphasized>
 <Radio value="wizard">Wizard</Radio>
 <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Example Options

WizardDragon