agentic-ui logoagentic-ui

Checkbox

Boolean selection with accessible label. Use the wrapper or compose CheckboxRoot + CheckboxIndicator with a raw base-ui Root.

High-level wrapper

import { Checkbox } from "@brijbyte/agentic-ui/checkbox";
import "@brijbyte/agentic-ui/checkbox.css";

export default function HighLevelDemo() {
  return (
    <>
      <Checkbox>Unchecked (default)</Checkbox>
      <Checkbox defaultChecked>Checked by default</Checkbox>
      <Checkbox disabled>Disabled unchecked</Checkbox>
      <Checkbox defaultChecked disabled>
        Disabled checked
      </Checkbox>
    </>
  );
}

Controlled

import { useState } from "react";
import { Checkbox } from "@brijbyte/agentic-ui/checkbox";
import "@brijbyte/agentic-ui/checkbox.css";

export default function ControlledDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox checked={checked} onCheckedChange={(c) => setChecked(c as boolean)}>
      I agree to the terms — {checked ? "✓ accepted" : "not accepted"}
    </Checkbox>
  );
}

Composed: base-ui Root + CheckboxIndicator

import { useId } from "react";
import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
import { CheckboxIndicator } from "@brijbyte/agentic-ui/checkbox";
import "@brijbyte/agentic-ui/checkbox.css";

export default function ComposedDemo() {
  const id = useId();
  return (
    <label
      htmlFor={id}
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
        cursor: "pointer",
        fontFamily: "var(--font-mono)",
        fontSize: "var(--font-size-sm)",
        color: "var(--color-primary)",
      }}
    >
      <BaseCheckbox.Root id={id}>
        <CheckboxIndicator />
      </BaseCheckbox.Root>
      Raw base-ui Root with styled indicator
    </label>
  );
}

Custom icon via CheckboxIndicator

import { useId } from "react";
import { CheckboxRoot, CheckboxIndicator } from "@brijbyte/agentic-ui/checkbox";
import "@brijbyte/agentic-ui/checkbox.css";

function StarIcon() {
  return (
    <svg viewBox="0 0 10 10" fill="currentColor">
      <path d="M5 1l1.09 2.26L8.5 3.64l-1.75 1.7.41 2.41L5 6.5 2.84 7.75l.41-2.41L1.5 3.64l2.41-.38L5 1z" />
    </svg>
  );
}

export default function CustomIconDemo() {
  const id = useId();
  return (
    <label
      htmlFor={id}
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
        cursor: "pointer",
        fontFamily: "var(--font-mono)",
        fontSize: "var(--font-size-sm)",
        color: "var(--color-primary)",
      }}
    >
      <CheckboxRoot id={id}>
        <CheckboxIndicator>
          <StarIcon />
        </CheckboxIndicator>
      </CheckboxRoot>
      Star checkbox — custom icon slot
    </label>
  );
}

API Reference

Checkbox

base-ui docs ↗

Boolean selection with an accessible label. Wraps @base-ui/react Checkbox
with a styled indicator, check icon, and label layout.

PropTypeDefault
checkedboolean—

Controlled checked state.

defaultCheckedboolean—

Initial checked state (uncontrolled).

indeterminateboolean—

Display a horizontal dash instead of a checkmark.

disabledboolean—

Prevent interaction and dim the checkbox.

requiredboolean—

Mark the field as required for form validation.

namestring—

HTML name attribute for form submission.

valuestring—

HTML value attribute for form submission.

onCheckedChange((checked: boolean, eventDetails: unknown) => void)—

Called when checked state changes. eventDetails is the base-ui event details object.

childrenReactNode—

Label content rendered next to the checkbox.

idstring—

Override the auto-generated element id.

classNamestring—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the CheckboxStyles object. Each key maps to a hashed CSS module class name at runtime.

iconindicatorlabelroot