Checkbox
import { Checkbox } from '@dr.pogodin/react-utils';
The Checkbox component implements checkboxes themed with React Themes.
Demo (expand to see the source code)
Managed two-states checkboxManaged three-states checkboxManaged three-states checkbox
import { type FunctionComponent, useState } from 'react';
import { Checkbox } from '@dr.pogodin/react-utils';
const CheckboxExample: FunctionComponent = () => {
const [checkbox2, setCheckbox2] = useState<boolean>(true);
const [checkbox3a, setCheckbox3a] = useState<boolean | 'indeterminate'>('indeterminate');
const [checkbox3b, setCheckbox3b] = useState<boolean | 'indeterminate'>('indeterminate');
return (
<>
<Checkbox
checked={checkbox2}
label="Managed two-states checkbox"
onChange={(e) => {
setCheckbox2(e.target.checked);
}}
/>
<Checkbox
checked={checkbox3a}
label="Managed three-states checkbox"
onChange={() => {
switch (checkbox3a) {
case true:
setCheckbox3a(false);
break;
case 'indeterminate':
setCheckbox3a(true);
break;
case false:
default:
setCheckbox3a('indeterminate');
}
}}
/>
<Checkbox
checked={checkbox3b}
disabled
label="Managed three-states checkbox"
onChange={() => {
switch (checkbox3b) {
case true:
setCheckbox3b(false);
break;
case 'indeterminate':
setCheckbox3b(true);
break;
case false:
default:
setCheckbox3b('indeterminate');
}
}}
/>
</>
);
};
export default CheckboxExample;
Properties
-
checked
— boolean | "indeterminate
" | undefined — Checkbox value.infoTo implement
indeterminate
state we don't useindeterminate
property of the underlying<input>
element, we rather simply appendindeterminate
theme class to the underlying<input>
and style it accordingly.There won't be a way to detect the current «indeterminate» state of the checkbox from the event argument of
onChange
hook, it will be necessary to fully manage it via the external state. -
disabled
— boolean | undefined — Disables the checkbox. -
label
— React.ReactNode — Checkbox label. -
onChange
— function — State change handler. -
testId
— string | undefined — Setsdata-testid
attribute to the underlying<input>
element; it is intended to faciliate testing with@testing-library/dom
. Ignored in production builds. -
theme
— CheckboxTheme — Ad hoc React Themes theme. -
Accepts other props of themed components.
CheckboxTheme
Valid theme keys are:
-
checkbox
— Applied to the underlying checkbox<input>
element. -
container
— Applied to the root checkbox element. -
disabled
— Applied to the root checkbox container if the component is disabled. -
indeterminate
— Applied to the underlying<input>
element when the component is in the «indeterminate» state. -
label
— Applied to the checkbox label element.
See React Themes documentation for details on visual component theming.