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):
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