Checkbox

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

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

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

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