Checkbox Group
A series of checkboxes with a shared state.
import * as React from 'react';
import { Checkbox } from '@base-ui-components/react/checkbox';
import { CheckboxGroup } from '@base-ui-components/react/checkbox-group';
import styles from './index.module.css';
export default function ExampleCheckboxGroup() {
return (
<CheckboxGroup
aria-labelledby="apples-caption"
defaultValue={['fuji-apple']}
className={styles.CheckboxGroup}
>
<div className={styles.Caption} id="apples-caption">
Apples
</div>
<label className={styles.Item}>
<Checkbox.Root name="fuji-apple" className={styles.Checkbox}>
<Checkbox.Indicator className={styles.Indicator}>
<CheckIcon className={styles.Icon} />
</Checkbox.Indicator>
</Checkbox.Root>
Fuji
</label>
<label className={styles.Item}>
<Checkbox.Root name="gala-apple" className={styles.Checkbox}>
<Checkbox.Indicator className={styles.Indicator}>
<CheckIcon className={styles.Icon} />
</Checkbox.Indicator>
</Checkbox.Root>
Gala
</label>
<label className={styles.Item}>
<Checkbox.Root name="granny-smith-apple" className={styles.Checkbox}>
<Checkbox.Indicator className={styles.Indicator}>
<CheckIcon className={styles.Icon} />
</Checkbox.Indicator>
</Checkbox.Root>
Granny Smith
</label>
</CheckboxGroup>
);
}
function CheckIcon(props: React.ComponentProps<'svg'>) {
return (
<svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
<path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
</svg>
);
}
API reference
Checkbox Group is composed together with Checkbox. Import the components and place them together:
import { Checkbox } from '@base-ui-components/react/checkbox';
import { CheckboxGroup } from '@base-ui-components/react/checkbox-group';
<CheckboxGroup>
<Checkbox.Root />
</CheckboxGroup>
Checkbox Group
The foundation for building custom-styled checkbox groups.
Prop | Type | Default | |
---|
allValues | string[] | undefined | |
---|
className | string | (state) => string | undefined | |
---|
defaultValue | string[] | undefined | |
---|
disabled | boolean | false | |
---|
onValueChange | (value, event) => void | undefined | |
---|
render | | React.ReactElement | (props, state) => React.ReactElement | undefined | |
---|
value | string[] | undefined | |
---|