Checkbox

import { AXCheckBoxModule } from '@acorex/components/check-box';

Checkbox component offers various features to enhance user interaction and understanding. It supports disabled and readonly modes, includes labels for descriptive text, provides hints for additional information, and allows for an indeterminate state. These capabilities make it a versatile tool for facilitating user selections and improving the overall user experience in applications.

Overview

In this section, you can test different options of this component and see the output in real time

Checkbox

Sample text hint long text with long note

Color

Primary

Disabled

Readonly

Indeterminate

Label

Hint

Usage

A simple example of using ax-check-box

Preview

Code

Hint

You can add ax-form-hint to the check box

Preview

Code

Indeterminate

You can pass true to indeterminate property in ax-check-box and the value must be null

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-checkbox-border-radius	0.25rem	Border radius of the checkbox.
--ax-comp-checkbox-border-width	1px	Border width of the checkbox.
--ax-comp-checkbox-font-size	0.875rem	Font size of the checkbox label.
--ax-comp-checkbox-line-height	1.25rem	Line height of the checkbox label.
--ax-comp-checkbox-end-side-padding-s	0.75rem	Padding on the end side of the checkbox (usually right in LTR).
--ax-comp-checkbox-end-side-gap	0.25rem	Gap between the checkbox end side.
--ax-comp-checkbox-bg-color	var(--ax-sys-color-border-surface)	Background color of the unchecked checkbox. Uses the system's border color.
--ax-comp-checkbox-checked-bg-color	var(--ax-sys-color-#{$name}-surface)	Background color of the checked checkbox. Uses a theme color.
--ax-comp-checkbox-checked-border-color	var(--ax-sys-color-#{$name}-surface)	Border color of the checked checkbox. Uses a theme color.
--ax-comp-checkbox-checked-bg-svg-fill	var(--ax-sys-color-on-#{$name}-surface)	Fill color of the checkmark icon. Uses a theme color.
--ax-comp-checkbox-checked-box-shadow-outline-color	var(--ax-sys-color-#{$name}-surface)	Outline/box-shadow color of checked checkbox. Uses a theme color.
--ax-comp-checkbox-disabled-opacity	0.5	Opacity of the checkbox when disabled (0 = transparent, 1 = opaque).
--ax-comp-checkbox-readonly-opacity	0.75	Opacity of the checkbox when readonly (0 = transparent, 1 = opaque).

Props

tabIndex	number	0	Specifies the tab index of the checkbox
readonly	boolean	false	Determines whether the checkbox is read-only.
disabled	boolean	false	Disables the checkbox.
checked	-	-	Indicates whether the checkbox is checked.
value	boolean	false	Sets the value of the checkbox.
name	string	-	Sets the name of the checkbox.
id	string	-	Sets the ID of the checkbox.
indeterminate	boolean	false	Indicates whether the checkbox is in an indeterminate state.
lable	boolean	true	Specifies whether a label is associated with the checkbox.
hint	boolean	true	Specifies whether a hint is associated with the checkbox.

Methods

onBlur	AXFocusEvent	Specifies the function to be called when the checkbox loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the checkbox gains focus.
valueChange	any	Specifies the function to be called when the value of the checkbox changes.
onValueChanged	AXValueChangedEvent<any>	Specifies the function to be called when the value of the checkbox changes.
readonlyChange	boolean	Specifies the function to be called when the readonly state of the checkbox changes.
stateChange	AXComponentState	Specifies the function to be called when the state of the checkbox changes.
validationRulesChange	AXFormValidationRule[]	Specifies the function to be called when the validation rules of the checkbox change.
disabledChange	boolean	Specifies the function to be called when the disabled state of the checkbox changes.