RadioGroup

Radio groups 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.

import {RadioGroup, Radio} from '@react-spectrum/s2';

<RadioGroup label="Favorite pet">
  <Radio value="cats">Cat</Radio>
  <Radio value="dogs">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.

import {RadioGroup, Radio} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState(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.

import {RadioGroup, Radio, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <RadioGroup
        {...props}
        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">Submit</Button>
    </Form>
  );
}

API

<RadioGroup>
  <Radio />
</RadioGroup>

RadioGroup

Radio