components

Input Checkbox

Checkbox allows users to select one or more items from a list, or to toggle a single option on or off. It supports checked, unchecked, indeterminate, and disabled states. The label text is provided as children of the component.

Import
import { InputCheckbox } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Toggle a single boolean setting on/off.
  • +Select multiple items from a list.
  • +Accept terms, conditions, or consent.

When not to use

  • −For mutually exclusive options — use InputRadio.
  • −For a simple on/off toggle with immediate effect — use ToggleSwitch.
  • −For selecting from a long list — use InputMultiselect.

Examples

Code Samples

Default (Unchecked)

A basic unchecked checkbox. The label text is passed as children.

import { InputCheckbox } from "@skedulo/breeze-ui-react";

export default function DefaultCheckbox() {
  return (
    <InputCheckbox name="terms">
      Accept terms and conditions
    </InputCheckbox>
  );
}

Controlled Checkbox

A checkbox with controlled checked state and an onChange handler.

import { useState } from "react";
import { InputCheckbox } from "@skedulo/breeze-ui-react";

export default function ControlledCheckbox() {
  const [isChecked, setIsChecked] = useState(true);

  return (
    <InputCheckbox
      name="privacy"
      checked={isChecked}
      onChange={() => setIsChecked(!isChecked)}
    >
      I agree to the privacy policy
    </InputCheckbox>
  );
}

Disabled States

Disabled checkboxes in both unchecked and checked states.

import { InputCheckbox } from "@skedulo/breeze-ui-react";

export default function DisabledCheckbox() {
  return (
    <div className="flex flex-col gap-2">
      <InputCheckbox name="disabled-unchecked" disabled>
        Disabled unchecked option
      </InputCheckbox>
      <InputCheckbox name="disabled-checked" checked disabled>
        Disabled checked option
      </InputCheckbox>
    </div>
  );
}

Indeterminate

The indeterminate state represents a "partially selected" group. Typically used for a parent "select all" checkbox when only some children are checked.

import { InputCheckbox } from "@skedulo/breeze-ui-react";

export default function IndeterminateCheckbox() {
  return (
    <InputCheckbox name="select-all" indeterminate>
      Select all items
    </InputCheckbox>
  );
}

Guidelines

Do

  • ✓Use clear, positive labels that describe the checked state.
  • ✓Group related checkboxes together visually.
  • ✓Use indeterminate state for parent checkboxes when children are partially selected.

Don't

  • ✗Don't use negative labels (e.g. 'Disable notifications') — use positive framing.
  • ✗Don't use a single checkbox when a toggle switch is more appropriate.
  • ✗Don't place checkboxes far from their labels.

API Reference

PropTypeDefaultDescription
name*string—The name attribute for the checkbox element, used for form submission and accessibility.
childrenReactNode—The label text or content displayed next to the checkbox.
checkedbooleanfalseWhether the checkbox is checked.
disabledbooleanfalsePrevents user interaction and applies a disabled visual style.
indeterminatebooleanfalseDisplays a horizontal dash instead of a checkmark, indicating a "partially selected" state. Commonly used for "select all" checkboxes when only some children are checked.
onChange() => void—Callback fired when the checkbox is toggled.

Related Components

Input RadioToggle SwitchInputMultiselect