React Aria
DocsReleasesBlog
React Aria

RadioGroup

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

Theme 
Favorite pet
 
orientation 
 
isDisabled 
Example
RadioGroup.tsx
RadioGroup.css
import {RadioGroup, Radio} from './RadioGroup';

<RadioGroup label="Favorite pet">
  <Radio value="cat">Cat</Radio>
  <Radio value="dog">Dog</Radio>
  <Radio value="dragon">Dragon</Radio>
</RadioGroup>

Value

Use the value or defaultValue prop to set the selected item, and onChange to handle selection changes.

Favorite sport

Current selection: None

import {RadioGroup, Radio} from './RadioGroup';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState<string | null>(null);

  return (
    <>
      <RadioGroup
        label="Favorite sport"
        value={selected}
        onChange={setSelected}>
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>
      <p>Current selection: {selected || 'None'}</p>
    </>
  );
}

Forms

Use the name prop to submit the selected radio to the server. Set the isRequired prop to validate that the user selects an option, or implement custom client or server-side validation. See the Forms guide to learn more.

Favorite pet
import {RadioGroup, Radio} from './RadioGroup';
import {Button} from './Button';
import {Form} from './Form';;

<Form>
  <RadioGroup
    label="Favorite pet"
    name="pet"
    isRequired>
    <Radio value="dog">Dog</Radio>
    <Radio value="cat">Cat</Radio>
    <Radio value="dragon">Dragon</Radio>
  </RadioGroup>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>

API

Shows a radio group component with labels pointing to its parts, including the radio group label, and radio group element containing three radios with input and label elements.CatDogDragonFavorite PetInputRadio group labelRadio groupRadio label 
<RadioGroup>
  <Label />
  <Radio>
    <SelectionIndicator />
  </Radio>
  <Text slot="description" />
  <FieldError />
</RadioGroup>

RadioGroup

NameTypeDefault
orientationDefault: 'vertical'
The axis the Radio Button(s) should align with.
isDisabledbooleanDefault: —
Whether the input is disabled.
isReadOnlybooleanDefault: —
Whether the input can be selected but not changed by the user.
children<>Default: —
The children of the component. A function may be provided to alter the children based on component state.
valuestring | nullDefault: —
The current value (controlled).
defaultValuestring | nullDefault: —
The default value (uncontrolled).
onChange(value: string) => voidDefault: —
Handler that is called when the value changes.

Default className: react-aria-RadioGroup

Render PropCSS Selector
orientationCSS Selector: [data-orientation="horizontal | vertical"]
The orientation of the radio group.
isDisabledCSS Selector: [data-disabled]
Whether the radio group is disabled.
isReadOnlyCSS Selector: [data-readonly]
Whether the radio group is read only.
isRequiredCSS Selector: [data-required]
Whether the radio group is required.
isInvalidCSS Selector: [data-invalid]
Whether the radio group is invalid.
stateCSS Selector: —
State of the radio group.

Radio

NameType
inputRef<HTMLInputElement | null>
A ref for the HTML input element.
isDisabledboolean
Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
children<>
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Radio

Render PropCSS Selector
isSelectedCSS Selector: [data-selected]
Whether the radio is selected.
isHoveredCSS Selector: [data-hovered]
Whether the radio is currently hovered with a mouse.
isPressedCSS Selector: [data-pressed]
Whether the radio is currently in a pressed state.
isFocusedCSS Selector: [data-focused]
Whether the radio is focused, either via a mouse or keyboard.
isFocusVisibleCSS Selector: [data-focus-visible]
Whether the radio is keyboard focused.
isDisabledCSS Selector: [data-disabled]
Whether the radio is disabled.
isReadOnlyCSS Selector: [data-readonly]
Whether the radio is read only.
isInvalidCSS Selector: [data-invalid]
Whether the radio is invalid.
isRequiredCSS Selector: [data-required]
Whether the checkbox is required.

Related pages