RadioGroup
A radio group allows a user to select a single item from a list of mutually exclusive options.
Favorite pet
orientation
isDisabled
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(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} from './RadioGroup';
import {Button} from './Button';
import {Form} from 'react-aria-components';
<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>