CheckboxGroup
A checkbox group allows a user to select multiple items from a list of options.
Vanilla CSS theme
This sets the
--tint CSS variable used by the Vanilla CSS examples.Theme
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 './Form';;
<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>