CheckBox

Usage

import CheckBox from "@adaptabletools/adaptable-ui/CheckBox";

<CheckBox defaultChecked />;

<CheckBox checked={1} />;

<CheckBox checked={0} />;

Live Editor

<label> <input type="checkbox" /> Native CheckBox </label>

<label>
  <input type="checkbox" /> Native CheckBox
</label>

Result

Native CheckBox

Props

Name	Optional	Type	Comment	Default
checked	true	boolean | 'mixed'	Specifies if the checkbox should be unchecked, checked or indeterminate (mixed) - controlled property	-
defaultChecked	true	boolean | 'mixed'	Specifies if the checkbox should be initially rendered as checked or not - uncontrolled property. For controlled version, see `checked`	-
onChange	true	(checked: boolean, event: ChangeEvent) => void	Change callback - will be fired when the checkbox value is changed. NOTE: the first argument is the new checked value	-
disabled	true	boolean	Wheather the CheckBox should be rendered as disabled	-
label	true	ReactNode	Content to render as the CheckBox label	-
labelPosition	true	'start' | 'end'	The position of the CheckBox label, relative to the check mark	"end"
domProps	true	HTMLProps	DOM attributes to be passed to the root DOM element. NOTE: The component renders a `label` element.	-

Theme Light

.aui-checkbox {

--icon-color: #fff;

--focus-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);

--focus-border-color: #63b3ed;

}

.aui-checkbox--checked-false {

--background-color: #fff;

--border-color: #e2e8f0;

}

.aui-checkbox--checked-false.aui-checkbox--disabled-true {

--background-color: #eee;

--border-color: #ccc;

}

.aui-checkbox--checked-true,

.aui-checkbox--checked-mixed {

--background-color: #4299e1;

--border-color: transparent;

}

.aui-checkbox--checked-true.aui-checkbox--disabled-true,

.aui-checkbox--checked-mixed.aui-checkbox--disabled-true {

--background-color: #ccc;

--border-color: transparent;

}

Theme Dark

.aui-checkbox {

--icon-color: #fff;

--focus-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);

--focus-border-color: #63b3ed;

}

.aui-checkbox--checked-false {

--background-color: #000;

--border-color: #586474;

}

.aui-checkbox--checked-false.aui-checkbox--disabled-true {

--background-color: #333;

--border-color: #666;

}

.aui-checkbox--checked-true,

.aui-checkbox--checked-mixed {

--background-color: #4299e1;

--border-color: transparent;

}

.aui-checkbox--checked-true.aui-checkbox--disabled-true,

.aui-checkbox--checked-mixed.aui-checkbox--disabled-true {

--background-color: #666;

--border-color: transparent;

}