What You'll Build

A form with different types of checkboxes: a single checkbox for agreements, a checkbox list for preferences, and a constrained checkbox list with minimum and maximum selections.

What You'll Learn

How to create single checkboxes for agreements
How to build checkbox lists for multiple selections
Setting minimum and maximum selection limits
Making individual options required within a checkbox list
Understanding checkbox orientation options

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our checkbox form step by step.

Step 2: Single Checkbox for Agreement

First, let's add a single checkbox for a terms and conditions agreement. We use addCheckbox() for individual checkboxes.

💡 Tip:

Single checkboxes return a boolean value (true/false). The isRequired: true property ensures users must check the box to proceed.

Step 3: Checkbox List for Preferences

Now let's add a checkbox list for multiple preferences. We use addCheckboxList() with an array of options.

💡 Tip:

Checkbox lists return an array of selected option IDs. The orientation: 'vertical' stacks the checkboxes vertically. Try changing it to 'horizontal'!

Step 4: Setting Min/Max Selections

Let's add a checkbox list with constraints. The min: 2 and max: 4 properties enforce selection limits.

💡 Tip:

Min/max constraints provide validation feedback to users. Try selecting fewer than 2 or more than 4 options to see the validation in action!

Step 5: Required Individual Options

Sometimes you need specific options to be mandatory within a checkbox list. Add isRequired: true to individual options to make them required.

💡 Tip:

Required options are marked with an asterisk (*) and show validation errors if not selected.

Step 6: Dynamic Required Options

You can make options conditionally required based on other selections. Use a function for isRequired that references other form values.

💡 Tip:

In this example, selecting "Premium Support" makes "Accept Premium Terms" required. Try checking and unchecking "Premium Support" to see the asterisk appear and disappear!

Try It Yourself

Challenge 1: Change the orientation of the preferences checkbox list to horizontal
Challenge 2: Add a new checkbox list with different min/max values (e.g., min: 1, max: 3)
Challenge 3: Add a single checkbox with a default value of true
Challenge 4: Make an option conditionally required using a function (e.g., isRequired: () => form.get('premium').value)

Next Steps

Great job completing this tutorial! You've learned how to work with checkboxes and checkbox lists. Ready to explore other selection fields?

Continue to Number Fields Tutorial

Other learning paths:

Learn about radio buttons and dropdowns
Master form layout with column widths
Add validation and conditional logic