Checkbox Component

A checkbox component with support for checked and indeterminate states.

Properties

Name	Type	Default	Description
checked	boolean	false	Indicates whether the checkbox is checked.
indeterminate	boolean	false	Indicates whether the checkbox is in an indeterminate state.
disabled	boolean	false	Indicates whether the checkbox is disabled.
value	string	'on'	The value of the checkbox when it is checked.

CSS Parts

Name	Description
checkbox	The main container for the checkbox.

Check this link to learn how to use CSS parts for Checkbox Component.

CSS Properties

Token	Default	Description
--tap-checkbox-border-radius	--tap-sys-radius-1	The border radius of the checkbox.
--tap-checkbox-height	--tap-sys-spacing-7	The height of the checkbox.
--tap-checkbox-width	--tap-sys-spacing-7	The width of the checkbox.
--tap-checkbox-input-height	--tap-sys-spacing-7	The height of the checkbox input.
--tap-checkbox-input-width	--tap-sys-spacing-7	The width of the checkbox input.
--tap-checkbox-background-color	--tap-sys-color-surface-primary	The background color of the checkbox.
--tap-checkbox-border	--tap-sys-color-border-inverse-primary	The border color of the checkbox.
--tap-checkbox-checked-background-color	--tap-sys-color-surface-inverse-primary	The background color of the checked or indeterminate checkbox.
--tap-checkbox-checked-color	--tap-sys-color-content-on-inverse	The color of the content inside the checked or indeterminate checkbox.
--tap-checkbox-checked-color	--tap-sys-color-surface-disabled	The background color of the disabled checkbox.
--tap-checkbox-disabled-border-color	--tap-sys-color-surface-disabled	The border color of the disabled checkbox.
--tap-checkbox-disabled-color	--tap-sys-color-content-disabled	The color of the content inside the disabled checkbox.