CheckboxGroup.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import vanillaDocs from 'docs:vanilla-starter/CheckboxGroup'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';

export const tags = ['input'];

CheckboxGroup

{docs.exports.CheckboxGroup.description}

```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="vanilla" files={["starters/docs/src/CheckboxGroup.tsx", "starters/docs/src/CheckboxGroup.css"]} "use client"; import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup'; import {Checkbox} from 'vanilla-starter/Checkbox';

<CheckboxGroup/* PROPS */> Soccer Baseball Basketball

```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="tailwind" files={["starters/tailwind/src/Checkbox.tsx"]}
"use client";
import {CheckboxGroup, Checkbox} from 'tailwind-starter/Checkbox';

<CheckboxGroup/* PROPS */>
  <Checkbox value="soccer">Soccer</Checkbox>
  <Checkbox value="baseball">Baseball</Checkbox>
  <Checkbox value="basketball">Basketball</Checkbox>
</CheckboxGroup>

Value

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

"use client";
import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
import {Checkbox} from 'vanilla-starter/Checkbox';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState(['soccer', 'baseball']);

  return (
    <>
      <CheckboxGroup
        label="Favorite sports"
        /*- begin highlight -*/
        value={selected}
        onChange={setSelected}>
        {/*- end highlight -*/}
        <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.

"use client";
import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
import {Checkbox} from 'vanilla-starter/Checkbox';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'react-aria-components';

<Form>
  <div style={{display: 'flex', gap: 32, flexWrap: 'wrap'}}>
    <CheckboxGroup
      label="Sandwich condiments"
      /*- begin highlight -*/
      name="condiments"
      isRequired>
      {/*- end highlight -*/}
      <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">
      {/*- begin highlight -*/}
      <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
      <Checkbox value="privacy" isRequired>Privacy policy</Checkbox>
      <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
      {/*- end highlight -*/}
    </CheckboxGroup>
  </div>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>

API

<CheckboxGroup>
  <Label />
  <Checkbox />
  <Text slot="description" />
  <FieldError />
</CheckboxGroup>

CheckboxGroup