CheckboxGroup
A checkbox group allows a user to select multiple items from a list of options.
Favorite sports
isDisabled
Value
Use the value or defaultValue prop to set the selected items, and onChange to handle selection changes.
Favorite sports
Current selection: soccer, baseball
import {CheckboxGroup} from './CheckboxGroup';
import {Checkbox} from './Checkbox';
import {useState} from 'react';
function Example() {
let [selected, setSelected] = useState(['soccer', 'baseball']);
return (
<>
<CheckboxGroup
label="Favorite sports"
value={selected}
onChange={setSelected}>
<Checkbox value="soccer">Soccer</Checkbox>
<Checkbox value="baseball">Baseball</Checkbox>
<Checkbox value="basketball">Basketball</Checkbox>
</CheckboxGroup>
<p>Current selection: {selected.join(', ')}</p>
</>
);
}
Forms
Use the name prop to submit the selected checkboxes to the server. Set the isRequired prop on the <CheckboxGroup> to validate the user selects at least one checkbox, or on individual checkboxes. See the Forms guide to learn more.
import {CheckboxGroup} from './CheckboxGroup';
import {Checkbox} from './Checkbox';
import {Button} from './Button';
import {Form} from 'react-aria-components';
<Form>
<div style={{display: 'flex', gap: 32, flexWrap: 'wrap'}}>
<CheckboxGroup
label="Sandwich condiments"
name="condiments"
isRequired>
<Checkbox value="lettuce">Lettuce</Checkbox>
<Checkbox value="tomato">Tomato</Checkbox>
<Checkbox value="onion">Onion</Checkbox>
<Checkbox value="sprouts">Sprouts</Checkbox>
</CheckboxGroup>
<CheckboxGroup label="Agree to the following" name="terms">
<Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
<Checkbox value="privacy" isRequired>Privacy policy</Checkbox>
<Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
</CheckboxGroup>
</div>
<Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>