Element types

Introduction

This guide walks through the most commonly used element types in Rulecube Forms. Each element type is demonstrated with step-by-step instructions so you know exactly how to add and configure it.

If you're not yet familiar with Forms, please read Form structure first.

All elements are added the same way: open a section, click + Element, and choose the type from the list.

---

Common properties

Most elements share these properties:

Property	Description
Label	Text displayed next to the element
Property binding → Path	Binds the element to a field in the ruleset model
Visibility	Always, Conditional, Conditional advanced, or Never
Help text	Small hint displayed below the element
Tooltip text	Shown when hovering the (?) icon next to the label
Custom CSS classes	Bootstrap 4 or your own CSS classes

---

If you're not yet familiar with Ruleset Development, please read Set the Input for a Ruleset first.

Previewing the Form

After saving the ruleset, you can click on the Preview button in the top right corner to see the inputs, buttons, dialog, etc.

Input types

Input — Date

A date picker.

1. Add an Input birthdate, set Type to date
2. Click + Element and choose Input
3. Expand the element
4. Set the Label to Date of birth
5. Under Property binding, set the Path to birthdate
6. Set the Input type to Date
7. Save the Ruleset

Input — Checkbox

A true/false toggle.

1. Add an Input agreed, set Type to boolean
2. Click + Element and choose Input
3. Expand the element
4. Set the Label to I agree to the terms
5. Under Property binding, set the Path to agreed
6. Set the Input type to Checkbox
7. Save the Ruleset

Input — Select

A dropdown with a fixed list of options.

1. Add an Input country, set Type to enum and add Netherlands, Belgium, Germany as Possible values
2. Click + Element and choose Input
3. Expand the element
4. Set the Label to Country
5. Under Property binding, set the Path to country
6. Set the Input type to MultiSelect
7. Add options under Options (e.g. Netherlands, Belgium, Germany)
8. Save the Ruleset

Alert

A colored message box — can show a static message or be bound to a ruleset alert.

Static message

1. Click + Element and choose Alert
2. Expand the element
3. Set the Alert level to Info, Warning, or Error
4. Set the Message to Please fill in all required fields
5. Save the Ruleset

Bound to a ruleset alert

1. Create an Alert, see Generate Alerts how te create one
2. Click + Element and choose Alert
3. Expand the element
4. Set the Alert type to Alert from Ruleset
5. Under Property binding, set the Path to the alert name from the ruleset
6. Save the Ruleset

The alert box appears and shows the alert message only when the ruleset triggers that alert.

Collapse

A collapsible panel — hides its content until the user expands it.

1. Add an Entity Alphabet with the following input

   1. input named a of type string
   2. input named b of type string
   3. input named c of type string

   ↳ See Entities

2. Click + Element and choose Collapse

3. Expand the element

4. Set the Label to Alphabet

5. Assign a Subform to render inside the collapse, click on +Create new subform and click on Add all base properties

6. Save the Ruleset

Tabs

A tab component where each tab renders a different subform.

1. Add an Entity Fruit with the following input

   1. input named apple of type number
   2. input named orange of type number

   ↳ See Entities

2. Create a Subform using the input properties from the Entity Fruit

   ↳ See Working with Subform

3. Click + Element and choose Tabs

4. Expand the element

5. Add one or more tabs — each tab requires a Tab title and a Subform

6. Save the Ruleset

Dialog

A modal dialog that appears when a bound property is true.

1. Add an Entity Restaurant with the following input

   1. input named food of type string
   2. input named drink of type string

   ↳ See Entities

2. Create a Subform using the input properties from the Entity Fruit

   ↳ See Working with Subform

3. Go to the tab Global variables

4. Click on +Add Variable and add showDialog as Name

5. Go to the tab Definition

6. Click on the +Element button and add an element of type Button

7. Add the following elements:

   • Label: Show dialog
   • On click actions: select Set global variable, Path: showDialog, Value:true

8. Click + Element and choose Dialog

9. Expand the element

10. Add the Title Restaurant

11. Assign a Subform to render inside the dialog

12. Under Property binding, set the Path to showDialog

13. Click on +Add Dialog button, add Button text Close

14. Save the Ruleset

CAPTCHA

A CAPTCHA element adds bot protection to your form. When the user submits the form, they must complete the CAPTCHA challenge before the form actions are executed.

Steps:

1. Add an Input captchaVerified, set Type to string
2. Add an element to a section
3. Set the type to CAPTCHA
4. Bind the Path to a boolean or string input in the ruleset (e.g. captchaVerified)
5. Save the Ruleset

The element renders a Google reCAPTCHA widget automatically

Template

An advanced element that supports raw HTML and Vue template syntax (v-if, v-for, @click, etc.).

1. Click + Element and choose Template
2. Expand the element
3. Write your HTML/Vue template in the Template editor
4. Save the Ruleset

The Template element requires knowledge of HTML and Vue.js. Use it only when the built-in element types don't cover your use case.

Table

Displays a list of items from a ruleset array or data source. See Working with Data sources for a full example.