CheckboxGroup

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

Project phases

ResearchDesignBuildLaunch

Choose every phase this project needs.

import { useState } from "react";
import { CheckboxGroup } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const phaseItems = [
  { value: "research", label: "Research" },
  { value: "design", label: "Design" },
  { value: "build", label: "Build" },
  { value: "launch", label: "Launch", disabled: true },
];

export default function CheckboxGroupExample() {
  const [phases, setPhases] = useState(["research", "design"]);

  return (
    <ExampleStack style={{ maxWidth: "32rem" }}>
      <CheckboxGroup
        value={phases}
        onValueChange={setPhases}
        hint="Choose every phase this project needs."
        label="Project phases"
        items={phaseItems}
      />
    </ExampleStack>
  );
}

Props

Prop	Attribute	Values	Default
`items`	None	`{ value, label, disabled? }[]`	None
`label`, `hint`	None	React node	None
`fieldOrientation`	None	`vertical`, `horizontal`	`vertical`
`checkboxProps`	None	Shared props for each checkbox	None
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`
`CheckboxGroup`	Mixed	Base UI checkbox group props	None

Label

Field label

OneTwo

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function CheckboxGroupLabelExample() {
  return <CheckboxGroup items={items} label="Field label" />;
}

Hint

Field label

OneTwo

Choose any option

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function CheckboxGroupHintExample() {
  return (
    <CheckboxGroup items={items} label="Field label" hint="Choose any option" />
  );
}

Field orientation

Vertical field

OneTwo

The field copy stacks above the options.

Horizontal field

OneTwo

The field copy sits beside the options.

import { CheckboxGroup } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function CheckboxGroupFieldOrientationExample() {
  return (
    <ExampleStack>
      <CheckboxGroup
        items={items}
        label="Vertical field"
        hint="The field copy stacks above the options."
        fieldOrientation="vertical"
      />
      <CheckboxGroup
        items={items}
        label="Horizontal field"
        hint="The field copy sits beside the options."
        fieldOrientation="horizontal"
      />
    </ExampleStack>
  );
}

Checkbox props

OneTwo

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function CheckboxGroupCheckboxPropsExample() {
  return (
    <CheckboxGroup
      items={items}
      checkboxProps={{
        emphasis: "primary",
        indicator: "●",
      }}
    />
  );
}

Size

import { CheckboxGroup } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function CheckboxGroupSizeExample() {
  return (
    <ExampleRow>
      <CheckboxGroup items={items} size="2xs" />
      <CheckboxGroup items={items} size="xs" />
      <CheckboxGroup items={items} size="sm" />
      <CheckboxGroup items={items} size="md" />
      <CheckboxGroup items={items} size="lg" />
      <CheckboxGroup items={items} size="xl" />
      <CheckboxGroup items={items} size="2xl" />
      <CheckboxGroup items={items} size="3xl" />
    </ExampleRow>
  );
}