CheckboxGroup

CheckboxGroup wraps Base UI’s checkbox group and coordinates a set of Checkbox controls.

import { Checkbox, CheckboxGroup } from "density-base-ui";

export default function CheckboxGroupExample() {
  return (
    <CheckboxGroup
      defaultValue={["research", "design"]}
      aria-label="Project phases"
    >
      <label>
        <Checkbox.Root value="research">
          <Checkbox.Indicator>On</Checkbox.Indicator>
        </Checkbox.Root>
        Research
      </label>
      <label>
        <Checkbox.Root value="design">
          <Checkbox.Indicator>On</Checkbox.Indicator>
        </Checkbox.Root>
        Design
      </label>
      <label>
        <Checkbox.Root value="build">
          <Checkbox.Indicator>On</Checkbox.Indicator>
        </Checkbox.Root>
        Build
      </label>
    </CheckboxGroup>
  );
}

Props

Prop Attribute Values Default
CheckboxGroup Mixed Base UI checkbox group props None