Checkbox 10.16.0

ARIA
RTL

The checkbox is shown as a square box that is ticked (checked) when activated.

Checkboxes are used to let a user select one or more options of a limited number of choices.

Default

"use client";

import { Checkbox } from "@heathmont/moon-core-tw";

export const Default = () => <Checkbox />;

export default Default;

    With label

    The label attribute enables you to add an associated text label for the <Checkbox />.

    "use client";

import { Checkbox } from "@heathmont/moon-core-tw";

export const WithLabel = () => <Checkbox label="With label" id="withLabel" />;

export default WithLabel;

      Checked

      You can control the state of <Checkbox /> with the checked attribute.

      "use client";

import { Checkbox } from "@heathmont/moon-core-tw";
import { useState } from "react";

export const Checked = () => {
  const [isChecked, setIsChecked] = useState(true);
  return (
    <Checkbox
      checked={isChecked}
      onClick={() => setIsChecked(!isChecked)}
      onChange={() => {
        console.log("isChecked:", isChecked);
      }}
      label="Checked"
      id="checked"
    />
  );
};

export default Checked;

        Disabled

        When <Checkbox/> is set to disabled, it becomes impossible to change its state.

        "use client";

import { Checkbox } from "@heathmont/moon-core-tw";

export const Disabled = () => (
  <>
    <Checkbox disabled label="Disabled" id="disabled1" />
    <Checkbox disabled checked label="Disabled Checked" id="disabled2" />
  </>
);

export default Disabled;

          Read only

          When <Checkbox/> is set to readOnly, it becomes impossible to change its state.

          "use client";

import { Checkbox } from "@heathmont/moon-core-tw";

export const ReadOnly = () => (
  <>
    <Checkbox readOnly label="ReadOnly" id="readOnly1" />
    <Checkbox readOnly checked label="ReadOnly Checked" id="readOnly2" />
  </>
);

export default ReadOnly;

            Partially selected

            The parent checkbox represents a grouped selection of the child checkboxes. When all child checkboxes are checked, the parent checkbox is displayed in a checked state. However, if only some of the child checkboxes are selected, the parent checkbox then enters a mixed state.

            "use client";

import { Checkbox } from "@heathmont/moon-core-tw";
import { useState } from "react";

export const PartiallySelected = () => {
  const [checkedItems, setCheckedItems] = useState([false, false]);

  const allChecked = checkedItems.every(Boolean);
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
  return (
    <div className="flex flex-col gap-2">
      <Checkbox
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
        label="Parent "
      />
      <div className="flex flex-col ps-4">
        <Checkbox
          checked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
          label="Child 1"
        />
        <Checkbox
          checked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
          label="Child 2"
        />
      </div>
    </div>
  );
};

export default PartiallySelected;

              Customization

              Customize the styles of <Checkbox /> using the bgColor prop and additional CSS classes.

              "use client";

import { Checkbox } from "@heathmont/moon-core-tw";

export const Customization = () => (
  <>
    <Checkbox bgColor="bg-krillin" />
    <Checkbox className="rounded-none" />
    <Checkbox className="shadow-krillin" />
    <Checkbox className="text-krillin-60" />
  </>
);

export default Customization;

                Checkbox

                These are props specific to the Checkbox component:

                Name
                Type
                Default
                bgColor
                		stringbg-piccolo
                label
                		"JSX.Element | string"-
                indeterminate
                		boolean-