Business Use Cases
Legal Consent
“I agree to the Terms of Service” and “I agree to the Privacy Policy” (using exact selections).
Preferences
“Which dietary requirements do you have?” (e.g., Vegan, Gluten-Free, Halal).
Feature Polling
“Select your top 3 favorite tools” (enforcing a max selection of 3).
Configuration & Usage
1
Deploy to Canvas
Drag the Checkboxes block from the Component Catalog onto the Canvas.
2
Build the List
Add your options (Values and Labels).
3
Enforce Limits
If you ask “Select your top 3 features,” use the Inspector to set the Max Selections and Min Selections to exactly 3.
Technical Configuration Schemas
- Visuals & UI
- Validation & Logic
string
default:"md"
The size of the checkboxes and accompanying text. Available options are
sm, md, and lg.array
An associative array mapping option keys to Heroicon names, displaying an icon next to specific checkboxes.
array
An associative array mapping option keys to secondary description strings, adding sub-text below specific checkboxes.
Data Payload Architecture
The selected checkboxes are saved as a JSON array of strings representing the keys (values) of the ticked boxes.Deep Dive: Validation Control
Checkboxes are prone to bad data if left unchecked. If you ask “What are your 2 favorite colors?”, a user could easily click all 10 options just to get through the form faster. By using the Exact Selections or Max Selections validation rules, the form will literally lock down and physically prevent the user from clicking a 3rd box, flashing an error state until they correct their behavior. This guarantees your data matches your intent.Best Practices & FAQs
When to switch to a Dropdown (multiple)
When to switch to a Dropdown (multiple)
If your list of Checkboxes exceeds 10 items, it creates a massive wall of text that is intimidating to users. At that scale, switch to a Dropdown with Multiple enabled to condense the interface into a searchable menu.