Checkbox

The Checkbox component allows users to select one or more options.

It can be toggled on and off and is ideal for forms, settings, or any scenario where multiple selections are needed.

Anatomy

A Checkbox consists of the following parts:

CheckboxIndicator: The container for the visual element (usually a checkmark) that appears when the checkbox is selected.

Adding a Checkbox

To add a Checkbox, select the Checkbox component from the Library and place it on your page. Once added, you can immediately customize it as needed.

Guides

Using Checkboxes in Forms

Checkboxes work best when used inside a form so you can get built-in validation and data handling. For this purpose, use the Checkbox Field component, which comes with its own label and error handling.

If you need to capture multiple checkbox selections, use the Checkboxes Field component instead.

To use checkboxes in a form:

Add the Form component from the Library.

Remove any unnecessary components from the form.

With the form selected, go to Insert Menu > Components > Form and select the Checkbox Field (or Checkboxes Field).

Label

Labels help screen readers understand what a checkbox is for and show users what the checkbox controls. To add a label to your checkbox:

Add a Label component from the Insert Menu.

Place the Checkbox component inside the Label.

Position the Checkbox above the Text element.

Use the Properties Panel to adjust the text and spacing so the label clearly relates to the checkbox.

Disabled

A disabled checkbox prevents users from interacting with it. This is useful when an option should not be selectable.

To disable a checkbox:

Select the Checkbox component and navigate to the Properties Panel.

Add the disabled property and set it to true.

Colors

You can change the colors of your checkbox to match your design. To update the colors:

Select the Checkbox component and go to the Properties Panel.

Click the States field and select the 'checked' state. This state lets you define how the checkbox looks when it's checked.

While in the 'checked' state, modify the background and border settings until you achieve your desired style.

To change the color of the check mark, select the Check icon, add the color property, and update it accordingly.

Sizes

You can also modify the size of the Checkbox to fit your layout:

Select the Checkbox component.

Navigate to Properties Panel > Spacing & Size.

Adjust the width and height values to set a custom size.

Custom Check Icon

If you want to replace the default checkmark with your own icon, follow these steps:

Select the Check icon within the CheckboxIndicator.

Navigate to Insert Menu > Icons.

Hold Option (Mac) or Alt (Windows) and click on your desired icon to swap it with the current check icon.

Properties

Checkbox

Property	Type	Default	Description
defaultValue	`string`	`‘on’`	The default value of the checkbox when it is first rendered.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the checkbox.
onCheckedChange	`Action`	-	Triggered when the checked state of the checkbox changes.
valueIfChecked	`string`	`‘on’`	The value of the checkbox when it is checked.