Checkbox element

The Checkbox element is a binary input tool. It is commonly used for “Yes/No” questions, agreeing to terms and conditions, or toggling a boolean state. Unlike the Choice element (which handles multiple options), the Checkbox handles a single on/off state.

This page covers how to collect True/False input or consent from users.

Overview

The Checkbox element is commonly used to give a choice between two options, typically ‘true’ or ‘false.’ When you check the box, it means ‘true,’ and when you leave it unchecked, it means ‘false.’ It’s a way to select one or more options from a list by clicking on them.

  • Function: Captures a single True (Checked) or False (Unchecked) value.
  • Database Mapping: Best paired with a Boolean field in your database.
  • Dynamic Binding: You can control the default state using data from your database (e.g., showing a task as already “Completed”).
  • Styling: The visual appearance of the box and the label font are managed via Theme Overrides.

Application Builder - Checkbox element

Add a checkbox

  1. Open the Elements panel (click the + icon).
  2. Select Checkbox.
  3. Drag and drop the element onto your canvas (typically inside a Form Container).

Configuration

Click the element to open the General properties tab.

1. Option name

This is the text displayed next to the checkbox.

  • Text: Enter a clear description (e.g., “I agree to the Terms of Service” or “Subscribe to newsletter”).
  • Position: The label usually appears to the right of the box.

2. Default Value

Determine the initial state of the checkbox when the page loads.

  • Unchecked (False): The box starts empty.
  • Checked (True): The box starts with a tick.
  • Dynamic: Click the Connect Data icon to bind this to a Data Source.
    • Use Case: When building an “Edit Profile” form, bind this to the user’s existing Email_Opt_In boolean field. If they are already opted in, the box will load as checked.

3. Required

Toggle this validation setting.

  • Checked: The user must check the box to submit the form. (Common for “Terms and Conditions”).
  • Unchecked: The user can leave the box empty.

Styling and Theme Overrides

By default, the checkbox inherits styles from your Global Theme. To customize a specific checkbox (e.g., to make the tick green or the label bold), use Theme Overrides.

  1. In the General tab, look for the Style/Settings icon (slider icon) next to the Label or Checkbox configuration fields.
  2. Clicking this opens the specific styling menu for that part of the element.

Styling the Checkbox (The Square)

  • Colors: Define the background color when unchecked vs. checked, and the color of the tick mark.
  • Border: Set the width, color, and radius (rounding) of the box edges.
  • Size: Adjust the physical size of the clickable area.

Styling the Label (The Text)

  • Typography: Font family, weight, size, and color.
  • Padding: Adjust the space between the checkbox and the text.

Frequently asked questions (FAQ)

How do I create a list of checkboxes?

If you need users to select multiple options from a list (e.g., “Select your interests: Coding, Design, Marketing”), use the Choice Element configured to “Multiple Select” mode, or use the Checkbox Element inside a Repeat Element.

Can I save the checkbox state?

Yes. Place the checkbox inside a Form Container. When configuring the form’s submission action (e.g., “Create Row”), map the Checkbox element’s value to a Boolean field in your table.

Does “Required” mean it must be True?

Yes. For a checkbox, “Required” validation means the user must check the box (value = True) to proceed. If you want a field that must be answered but can be No, consider using a Choice element with “Yes/No” options.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.