check_box

Checkbox

Binary selection for multiple choices.

Checkbox Examples

Copy-ready examples with live previews.

Basic usage (controlled)

Use `checked` + `onChange` to control state.

Live preview

checkAccept terms

This field is required

checked: false

"use client";

import { useState, type ChangeEvent } from "react";
import Checkbox from "@/packages/ui/src/_components/checkbox/Checkbox";

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

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
  };

  return (
    <Checkbox
      checked={checked}
      onChange={handleChange}
      label="Accept terms"
      required
      extraText={checked ? "Thanks!" : "This field is required"}
      extraTextState={checked ? "success" : "support"}
    />
  );
}

Sizes

Use `size` to adjust the control and spacing.

Live preview

checkSmall

checkMedium

checkLarge

"use client";

import { useState } from "react";
import Checkbox from "@/_components/checkbox/Checkbox";

export default function Example() {
  const [s, setS] = useState({ small: true, medium: true, large: true });

  return (
    <>
      <Checkbox
        size="small"
        checked={s.small}
        onChange={(e) => setS((p) => ({ ...p, small: e.target.checked }))}
        label="Small"
      />

      <Checkbox
        size="medium"
        checked={s.medium}
        onChange={(e) => setS((p) => ({ ...p, medium: e.target.checked }))}
        label="Medium"
      />

      <Checkbox
        size="large"
        checked={s.large}
        onChange={(e) => setS((p) => ({ ...p, large: e.target.checked }))}
        label="Large"
      />
    </>
  );
}

Variants

Use `variant` for semantic tone classes.

"use client";

import { useState } from "react";
import Checkbox from "@/_components/checkbox/Checkbox";

export default function Example() {
  const [v, setV] = useState({
    primary: true,
    success: true,
    warning: true,
    danger: true,
    info: true,
  });

  return (
    <>
      <Checkbox
        variant="primary"
        checked={v.primary}
        onChange={(e) => setV((p) => ({ ...p, primary: e.target.checked }))}
        label="Primary"
      />
      <Checkbox
        variant="success"
        checked={v.success}
        onChange={(e) => setV((p) => ({ ...p, success: e.target.checked }))}
        label="Success"
      />
      <Checkbox
        variant="warning"
        checked={v.warning}
        onChange={(e) => setV((p) => ({ ...p, warning: e.target.checked }))}
        label="Warning"
      />
      <Checkbox
        variant="danger"
        checked={v.danger}
        onChange={(e) => setV((p) => ({ ...p, danger: e.target.checked }))}
        label="Danger"
      />
      <Checkbox
        variant="info"
        checked={v.info}
        onChange={(e) => setV((p) => ({ ...p, info: e.target.checked }))}
        label="Info"
      />
    </>
  );
}

Label position

Place the label to the left or right of the control.

Live preview

checkLabel left

checkLabel right

"use client";

import { useState } from "react";
import Checkbox from "@/_components/checkbox/Checkbox";

export default function Example() {
  const [left, setLeft] = useState(true);
  const [right, setRight] = useState(true);

  return (
    <>
      <Checkbox
        checked={left}
        onChange={(e) => setLeft(e.target.checked)}
        label="Label left"
        labelPosition="left"
      />

      <Checkbox
        checked={right}
        onChange={(e) => setRight(e.target.checked)}
        label="Label right"
        labelPosition="right"
      />
    </>
  );
}

Helper text

Use `extraText` + `extraTextState` for feedback under the checkbox.

Live preview

checkSubscribe

Saved successfully

"use client";

import { useState } from "react";
import Checkbox from "@/packages/ui/src/_components/checkbox/Checkbox";

export default function Example() {
  const [checked, setChecked] = useState(true);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      label="Subscribe"
      extraText={checked ? "Saved successfully" : "Something went wrong"}
      extraTextState={checked ? "success" : "error"}
    />
  );
}

Disabled

Disable interaction with `disabled`.

Live preview

checkDisabled (checked)

You can’t change this

checkDisabled

import Checkbox from "@/_components/checkbox/Checkbox";

export default function Example() {
  return (
    <>
      <Checkbox checked disabled label="Disabled (checked)" />
      <Checkbox disabled label="Disabled" />
    </>
  );
}

Select all (indeterminate)

Compute a mixed state and pass `indeterminate` for the visual mark (this implementation does not set the native input indeterminate property).

• If you need assistive tech support for mixed states, consider adding aria-checked="mixed" when indeterminate is true (not implemented in the component).

Live preview

removeSelect all

Mixed selection

checkItem A

checkItem B

checkItem C

"use client";

import { useState } from "react";
import Checkbox from "@/_components/checkbox/Checkbox";

export default function Example() {
  const [items, setItems] = useState({ a: true, b: false, c: true });

  const values = Object.values(items);
  const allChecked = values.every(Boolean);
  const noneChecked = values.every((v) => !v);
  const indeterminate = !allChecked && !noneChecked;

  const setAll = (next: boolean) => {
    setItems({ a: next, b: next, c: next });
  };

  return (
    <>
      <Checkbox
        checked={allChecked}
        indeterminate={indeterminate}
        onChange={(e) => setAll(e.target.checked)}
        label="Select all"
      />

      <Checkbox
        checked={items.a}
        onChange={(e) => setItems((p) => ({ ...p, a: e.target.checked }))}
        label="Item A"
        value="a"
        nameGroup="items"
      />
      <Checkbox
        checked={items.b}
        onChange={(e) => setItems((p) => ({ ...p, b: e.target.checked }))}
        label="Item B"
        value="b"
        nameGroup="items"
      />
      <Checkbox
        checked={items.c}
        onChange={(e) => setItems((p) => ({ ...p, c: e.target.checked }))}
        label="Item C"
        value="c"
        nameGroup="items"
      />
    </>
  );
}

On this page

Checkbox Props

Checkbox — Props
Prop	Type	Required	Default	Description
value	string \| number	No	undefined	Sets the input value (useful for forms/arrays).
nameGroup	string	No	undefined	Sets the input name (useful for grouping / submitting to backend).
checked	boolean	No	undefined	If provided, the checkbox becomes controlled.
disabled	boolean	No	undefined	Disables the input.
required	boolean	No	undefined	Sets required on the input and adds a required class to the root.
indeterminate	boolean	No	undefined	Visual mixed state (adds indeterminate class and swaps the mark icon). Does not set the native HTMLInputElement.indeterminate property.
variant	"primary" \| "secondary" \| "tertiary" \| "success" \| "warning" \| "danger" \| "info"	No	undefined	Visual tone class on the root.
size	"small" \| "medium" \| "large"	No	undefined	Size class on the root.
label	string	No	undefined	Text label content.
labelPosition	"left" \| "right"	No	undefined	Places the label to the left/right (root class).
extraText	string	No	undefined	Helper/support text rendered under the checkbox.
extraTextState	"support" \| "success" \| "error"	No	undefined	Helper text styling state (class applied to the helper paragraph).
onChange	(...args: any[]) => any	No	undefined	Forwarded to the input onChange.
onClick	(...args: any[]) => any	No	undefined	Forwarded to the input onClick.