Skip to content

Checkbox beta

A checkbox is represented by a small box that users can check or uncheck. It is commonly used in forms and interactive content, allowing users to make selections or indicate binary choices with ease.

To add a label to the checkbox, you can use the label attribute within the <ch-checkbox> element. The attribute value should be the text you want to display as the label next to the checkbox.

<ch-checkbox label="Label text"></ch-checkbox>

The position of the label is position after the checkbox by default. To put the label before the checkbox, use the label-position attribute and set the value to start.

<ch-checkbox label="Label text" label-position="start"></ch-checkbox>

The checkbox is unchecked by default. When you include the checked attribute within the <ch-checkbox> element, the checkbox will appear checked.

<ch-checkbox label="Label text" checked></ch-checkbox>

To create a indeterminate checkbox, include the indeterminate attribute within the <ch-checkbox> element.

<ch-checkbox label="Label text" indeterminate></ch-checkbox>

To create a required checkbox, include the required attribute within the <ch-checkbox> element.

<ch-checkbox label="Label text" required></ch-checkbox>

To disable the checkbox, include the disabled attribute within the <ch-checkbox> element.

<ch-checkbox label="Label text" disabled></ch-checkbox>