Density

Checkbox

Checkbox renders Base UI’s checkbox root and indicator from one component.

Show archived projectsArchived projects stay hidden from the main project list.
import { Checkbox } from "density-base-ui";

export default function CheckboxExample() {
  return (
    <Checkbox
      defaultChecked
      hint="Archived projects stay hidden from the main project list."
      label="Archive visibility"
    >
      Show archived projects
    </Checkbox>
  );
}

Props

Prop Attribute Values Default
label None React node None
hint None React node None
fieldOrientation None vertical, horizontal vertical
indicator None React node ✓
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Label

Control label
import { Checkbox } from "density-base-ui";

export default function CheckboxLabelExample() {
  return <Checkbox label="Field label">Control label</Checkbox>;
}

Hint

Control labelA short field hint
import { Checkbox } from "density-base-ui";

export default function CheckboxHintExample() {
  return (
    <Checkbox label="Field label" hint="A short field hint">
      Control label
    </Checkbox>
  );
}

Field orientation

Control labelThe label stacks above the control.
Control labelThe label sits beside the control.
import { Checkbox } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function CheckboxFieldOrientationExample() {
  return (
    <ExampleStack>
      <Checkbox
        label="Vertical field"
        hint="The label stacks above the control."
        fieldOrientation="vertical"
      >
        Control label
      </Checkbox>
      <Checkbox
        label="Horizontal field"
        hint="The label sits beside the control."
        fieldOrientation="horizontal"
      >
        Control label
      </Checkbox>
    </ExampleStack>
  );
}

Indicator

Custom indicator
import { Checkbox } from "density-base-ui";

export default function CheckboxIndicatorExample() {
  return <Checkbox indicator="●">Custom indicator</Checkbox>;
}

Emphasis

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

export default function CheckboxEmphasisExample() {
  return (
    <ExampleRow>
      <Checkbox emphasis="primary">Primary</Checkbox>
      <Checkbox emphasis="secondary">Secondary</Checkbox>
      <Checkbox emphasis="outline">Outline</Checkbox>
      <Checkbox emphasis="ghost">Ghost</Checkbox>
    </ExampleRow>
  );
}

Size

2xsxssmmdlgxl2xl3xl
import { Checkbox } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

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