Checkbox

A styled native checkbox, including the indeterminate state.

Default

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxDefault() {
  return <Checkbox label="Accept terms and conditions" defaultChecked />;
}

Colors

The color prop offers primary (default), secondary, success, info, warning, danger, and neutral.

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxColors() {
  return (
    <div className="flex flex-col gap-2">
      <Checkbox color="primary" label="Primary" defaultChecked />
      <Checkbox color="secondary" label="Secondary" defaultChecked />
      <Checkbox color="success" label="Success" defaultChecked />
      <Checkbox color="info" label="Info" defaultChecked />
      <Checkbox color="warning" label="Warning" defaultChecked />
      <Checkbox color="danger" label="Danger" defaultChecked />
      <Checkbox color="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Sizes

The size prop offers three sizes: sm (default), md, and lg.

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxSizes() {
  return (
    <div className="flex flex-col gap-2">
      <Checkbox size="sm" label="Small" defaultChecked />
      <Checkbox size="md" label="Medium" defaultChecked />
      <Checkbox size="lg" label="Large" defaultChecked />
    </div>
  );
}

Inline

The inline prop lays fields out in a row.

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxInline() {
  return (
    <div>
      <Checkbox inline label="Email" defaultChecked />
      <Checkbox inline label="SMS" />
      <Checkbox inline label="Push" />
    </div>
  );
}

Indeterminate

The indeterminate prop renders the mixed state, such as a "select all" parent.

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxIndeterminate() {
  return <Checkbox indeterminate label="Select all" />;
}

Disabled

tsx

import { Checkbox } from "@hummingbirdui/react";

export default function CheckboxDisabled() {
  return (
    <div className="flex flex-col gap-2">
      <Checkbox label="Disabled unchecked" disabled />
      <Checkbox label="Disabled checked" disabled defaultChecked />
    </div>
  );
}

API Reference

Checkbox

PropTypeDefaultDescription
color"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "neutral""primary"Color theme of the checkbox.
size"sm" | "md" | "lg""sm"Size of the checkbox.
labelReact.ReactNode—Text rendered beside the control, wrapped in a clickable label.
inlinebooleanfalseLay the field out inline.
indeterminatebooleanfalseRender the mixed (tri-state) checkbox.
classNamestring—Additional classes merged with the generated classes.

Styling

Hummingbird React checkbox is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available checkbox classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousSelectNextRadio