Checkbox

The Checkbox component provides a customizable, accessible checkbox input.
It is built on top of the Radix UI Checkbox primitive with additional styling.

Usage

import { Checkbox } from "@harnessio/ui/components";

function Example() {
  const [checked, setChecked] = React.useState(false);
  const [indeterminate, setIndeterminate] = React.useState<'indeterminate' | boolean>(false);
  const [optionalChecked, setOptionalChecked] = React.useState(false);

  return (
    <div className="flex flex-col space-y-8">
      {/* Standard usage */}
      <Checkbox
        id="checkbox-standard"
        checked={checked}
        onCheckedChange={setChecked}
        label="Accept terms and conditions"
        caption="You must accept terms and conditions to proceed."
      />

      {/* Indeterminate state */}
      <Checkbox
        id="checkbox-indeterminate"
        checked={indeterminate}
        onCheckedChange={setIndeterminate}
        label="Select items"
        caption="Indicates partial selection of items."
      />

      {/* Optional */}
      <Checkbox
        id="checkbox-optional"
        checked={optionalChecked}
        onCheckedChange={setOptionalChecked}
        label="Subscribe to newsletter"
        caption="This field is optional."
        optional
      />

      {/* Disabled */}
      <Checkbox
        id="checkbox-disabled"
        checked={false}
        onCheckedChange={() => {}}
        disabled
        label="Subscribe to newsletter"
        caption="This option is currently unavailable."
      />

      {/* Without Label */}
      <Checkbox
        id="checkbox-no-label"
        checked={checked}
        onCheckedChange={setChecked}
      />
    </div>
  );
}

API Reference

The Checkbox component can be used either controlled with the checked and onCheckedChange props, or uncontrolled.
When used uncontrolled, the defaultChecked prop can be used to set the initial state of the checkbox.

<Checkbox
  id="accept-terms"              // [OPTIONAL] ID of the checkbox
  checked                        // [OPTIONAL] whether the checkbox is checked or indeterminate
  defaultChecked                 // [OPTIONAL] initial checked state
  required                       // [OPTIONAL] whether the checkbox is required
  onCheckedChange={handleChange} // [OPTIONAL] callback called when the checked state changes
  disabled                       // [OPTIONAL] whether the checkbox is disabled
  label                          // [OPTIONAL] a label displayed next to the checkbox
  caption                        // [OPTIONAL] a caption displayed under the label
  optional                       // [OPTIONAL] indicates if the field is optional
/>

Prop	Required	Default	Type
id	false		string
checked	false	false	boolean | 'indeterminate'
defaultChecked	false	false	boolean
required	false	false	boolean
onCheckedChange	false		(checked: boolean | 'indeterminate') => void
disabled	false	false	boolean
label	false		string
caption	false		string
optional	false	false	boolean
className	false		string