CheckBox

CheckBox

The CheckBox component provides a customizable checkbox with support for labels, badges, and various states. It also includes a CheckBox.Card subcomponent for use within card layouts. The component now supports an indeterminate state.

Usage

import CheckBox from 'blendx-ui/CheckBox';

const MyCheckBox = () => (
<CheckBox
  checked={true}
  onChange={(event) => {
    console.log('Checked:', event.target.checked);
    console.log('Name:', event.target.name);
  }}
  label="Example Checkbox"
  sublabel="This is a sublabel"
  badge="New"
/>
);

export default MyCheckBox;

Props

• checked (bool): Indicates whether the checkbox is checked. Default is false.
• indeterminate (bool): When true, the checkbox appears in an indeterminate state, often used for checkboxes that represent a mixed selection. Default is false.
• onChange (func): Callback function that is triggered when the checkbox state changes. Receives a standard React event object with event.target.checked and event.target.name.
• inputRef (ref): A ref to the underlying input element.
• label (string): The main label text for the checkbox.
• sublabel (string): Optional sublabel text displayed below the main label.
• badge (string): Optional badge text displayed alongside the label.
• className (string): Additional CSS class names to apply to the component.
• position (string): Position of the checkbox relative to the label. Default is left.
• description (string): Optional description text displayed below the checkbox.
• link (string): Optional link text that appears below the checkbox description.

Example with Indeterminate State

<CheckBox
  checked={false}
  indeterminate={true}
  onChange={(event) => console.log('Checkbox changed:', event.target.checked)}
  label="Indeterminate Checkbox"
  description="This checkbox represents a mixed selection."
/>

CheckBox.Card

The CheckBox.Card component is a variant of the CheckBox component that is displayed within a card layout, making it suitable for use in card-based designs. It also supports the indeterminate state.

Usage

import CheckBox from 'blendx-ui/CheckBox';

const MyCheckBoxCard = () => (
<CheckBox.Card
  checked={true}
  onChange={(event) => {
    console.log('Checked:', event.target.checked);
    console.log('Name:', event.target.name);
  }}
  label="Example Card Checkbox"
  sublabel="This is a sublabel"
  badge="New"
  image="path/to/image.jpg"
/>
);

export default MyCheckBoxCard;

Props

• checked (bool): Indicates whether the checkbox is checked. Default is false.
• indeterminate (bool): When true, the checkbox appears in an indeterminate state. Default is false.
• onChange (func): Callback function that is triggered when the checkbox state changes. Receives a standard React event object with event.target.checked and event.target.name.
• inputRef (ref): A ref to the underlying input element.
• label (string): The main label text for the checkbox.
• sublabel (string): Optional sublabel text displayed below the main label.
• badge (string): Optional badge text displayed alongside the label.
• image (string): Optional URL for an image to display in the card.
• className (string): Additional CSS class names to apply to the component.
• description (string): Optional description text displayed below the checkbox.
• disabled (bool): If true, the checkbox and card are disabled.

Notes:

1. Event Handling Change: The CheckBox component now follows the standard React event pattern. Instead of receiving (checked, name) in the onChange handler, it now receives a standard React event object with event.target.checked and event.target.name. This makes it compatible with form libraries and other components that expect the standard React event pattern.

2. If you're migrating from an older version, you'll need to update your onChange handlers:

   // Old pattern
   onChange={(checked, name) => console.log(checked, name)}
   
   // New pattern
   onChange={(event) => {
     const { checked, name } = event.target;
     console.log(checked, name);
   }}

Re-exported Components:

• CheckBox.Card
• CheckBox

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1
frontend-app-course-authoring	1
frontend-app-authn	3

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/users/staffs/index.jsx

frontend-app-course-authoring

• src/cohorts/index.jsx

frontend-app-authn

• src/field-renderer/FieldRenderer.jsx
• src/register/RegistrationFields/HonorCodeField/HonorCode.jsx
• src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx