Checkbox component

Usage

Import like this:

import { Checkbox } from '@tdcerhverv/checkbox';

Checkbox is a controlled input component that handles checked state internally or by supplied props. It wraps around the CheckboxUncontrolled components.

import { CheckboxSimple } from '@tdcerhverv/checkbox';

CheckboxSimple is wrapping the normal Checkbox with legacy support.

Note: The simple variant is kept for compatibility reasons, and will be removed in next major version (^2.0.0).

import { CheckboxUncontrolled } from '@tdcerhverv/checkbox';

CheckboxUncontrolled is the core component that renders the required html elements and applies styling. Checkbox is a wrapper around this.

import { CheckboxGroup } from '@tdcerhverv/checkbox';

CheckboxGroup accepts an array of ICheckboxItem (see below) and displays them all with a breakpoint in between.

import { findAndSwitch } from '@tdcerhverv/checkbox';

findAndSwitch is a helper function to be used with CheckboxGroup that finds an entry in the array of ICheckboxItem and toggles the checked state and removes any error. It returns a new array with a clone of the mutated item.

Props & Types

These are all quite similar but with minor differences anyway. They are explained individually here for clarity reasons.

Checkbox

The standard Checkbox extends React HTMLInputElement type, but omits certain props. Here's a simplified version:

interface ICheckbox extends HTMLInputElement {
  error?: string;
  label?: ReactNode;
  labelClassName?: string;
  errorClassName?: string;
  indeterminate?: boolean;
  isChecked?: boolean;
}

These are the props of the HTMLInputElement type that are omitted and therefore not supported:

  checked?: boolean;
  type?: string;

CheckboxUncontrolled

The uncontrolled variant extends the React HTMLInputElement type, but is less restricted and only omits type prop.

interface ICheckboxUncontrolled extends HTMLInputElement {
  error?: string;
  label?: ReactNode;
  labelClassName?: string;
  errorClassName?: string;
  indeterminate?: boolean;
}

This is the prop of the HTMLInputElement type that is omitted and therefore not supported:

  type?: string;

CheckboxSimple

Note: The simple variant is kept for compatibility reasons, and will be removed in next major version (^2.0.0).

Like the the standard Checkbox it extends React HTMLInputElement type, but omits certain props. Here's a simplified version:

interface CheckboxRenderProps extends HTMLInputElement {
  error?: string;
  label?: ReactNode;
  labelClassName?: string;
  errorClassName?: string;
  indeterminate?: boolean;
  isChecked?: boolean;
  state?: 'checked' | 'unchecked';
}

These are the props of the HTMLInputElement type that are omitted and therefore not supported:

  checked?: boolean;
  type?: string;

As listed the CheckboxSimple also support the new isChecked boolean property.

CheckboxGroup

The group component creates a <fieldset> with Checkbox components. It accepts either Checkbox or CheckboxSimple interfaces, but renders only Checkbox.

type ICheckboxItem = ICheckbox | CheckboxRenderProps;

interface ICheckboxGroup {
  items: ICheckboxItem[];
  onItemChange: (item: ICheckboxItem) => void;
  legend?: string;
  indent?: boolean;
}

Adding legend will place a title above the checkboxes, and indent will push the checkboxes like a nested group.

See the examples folder for examples on usage with findAndSwitch.

Note: support for CheckboxSimple interface will be removed in next major version (^2.0.0).

Uncontrolled variant

The default checkbox is controlled, and that's the one you are supposed to use. However, it is possibly to use the uncontrolled variant.

import { CheckboxUncontrolled } from '@tdcerhverv/checkbox';

CheckboxUncontrolled is an input type=checkbox component with applied TDC Erhverv specific styling. The difference between CheckboxUncontrolled and Checkbox is that the later can be given a specific state value ("checked | unchecked") and an onChange function, while the uncontrolled handles checked state in the DOM, and you will have to use a ref to get the checked state.

Read more here (learn why it's a separate compononent):

• Read more about uncontrolled components
• Read more about controlled components

Note: the uncontrolled variant will be less exposed in next major version (^2.0.0), so that if you really need it you will have to import it from the full path, @tdcerhverv/checkbox/lib/variants/CheckboxUncontrolled.

Known Issues & To-Do

• Remove legacy support for CheckboxSimple in next major version (^2.0.0).
• Remove uncontrolled variant from default exports.

Tags

input checkbox