CheckboxTristate

CheckboxTristate UI Component - Expands Checkbox to third undefined state.

Installation

npm i @synerise/ds-checkbox-tristate
or
yarn add @synerise/ds-checkbox-tristate

Usage

import CheckboxTristate, { CheckboxTristateChangeEvent } from '@synerise/ds-checkbox-tristate';
<CheckboxTristate
checked={checkedValue}
onChange={(event: CheckboxTristateChangeEvent) => {
console.log(event.target.checked); // this will return false|true|undefined
}}
/>

Demo

API

PropertyDescriptionTypeDefault
autoFocusGet focus when component mountedbooleanfalse
checkedSpecifies whether the checkbox is selected or indeterminatebooleanundefined
defaultCheckedSpecifies the initial state: whether or not the checkbox is selected.booleanfalse
descriptionCheckbox descriptionstring-
disabledDisable checkboxbooleanfalse
errorTextError message, if provided sets error state on checkboxstring-
hasErrorDetermines if checkbox is in error statebooleanfalse
onChangeThe callback function that is triggered when the state changes.(e:CheckboxTristateChangeEvent)=>void-
withoutPaddingReset padding of CheckboxWrapperbooleanfalse