Density

CheckboxGroup

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

ResearchDesignBuildLaunch
import { useState } from "react";
import { CheckboxGroup, View } from "density-base-ui";

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 (
    <View align="start" gap="md" padding={false} style={{ maxWidth: "32rem" }}>
      <CheckboxGroup
        value={phases}
        onValueChange={setPhases}
        items={phaseItems}
      />
    </View>
  );
}

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

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" />
  );
}

Error

OneTwo
Choose at least one option.
import { CheckboxGroup } from "density-base-ui";

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

export default function CheckboxGroupErrorExample() {
  return (
    <CheckboxGroup
      errorMessage="Choose at least one option."
      hint="Choose any option."
      items={items}
      label="Options"
    />
  );
}

Field orientation

OneTwo
The field copy stacks above the options.
OneTwo
The field copy sits beside the options.
import { CheckboxGroup, Separator, View } from "density-base-ui";

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

export default function CheckboxGroupFieldOrientationExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <CheckboxGroup
        items={items}
        label="Vertical field"
        hint="The field copy stacks above the options."
        fieldOrientation="vertical"
      />
      <Separator />
      <CheckboxGroup
        items={items}
        label="Horizontal field"
        hint="The field copy sits beside the options."
        fieldOrientation="horizontal"
      />
    </View>
  );
}

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" }} />
  );
}

Size

OneTwo
OneTwo
OneTwo
OneTwo
OneTwo
OneTwo
OneTwo
OneTwo
import { CheckboxGroup, Separator, View } from "density-base-ui";

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

export default function CheckboxGroupSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <CheckboxGroup items={items} size="2xs" />
      <Separator />
      <CheckboxGroup items={items} size="xs" />
      <Separator />
      <CheckboxGroup items={items} size="sm" />
      <Separator />
      <CheckboxGroup items={items} size="md" />
      <Separator />
      <CheckboxGroup items={items} size="lg" />
      <Separator />
      <CheckboxGroup items={items} size="xl" />
      <Separator />
      <CheckboxGroup items={items} size="2xl" />
      <Separator />
      <CheckboxGroup items={items} size="3xl" />
    </View>
  );
}