Density

Checkbox

Checkbox composes Base UI’s checkbox root and indicator with Density control attributes on the root.

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

export default function CheckboxExample() {
  return (
    <label>
      <Checkbox.Root defaultChecked>
        <Checkbox.Indicator>On</Checkbox.Indicator>
      </Checkbox.Root>
      Show archived projects
    </label>
  );
}

Props

Prop Attribute Values Default
Checkbox.Root density-presentation data-dn-presentation button button
Checkbox.Root density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Checkbox.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Checkbox.Root, Checkbox.Indicator Mixed Base UI checkbox props None