Rule builder
Field/operator/value clauses for typed rule editing while the application owns expression semantics.
Canonical sourcepatterns/rule-builder.html
Behavior ownerApplication / Limen
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
Applicability rule
Define when this section is shown.
AND
Meaning: Show this section when Answer(Q1) = Yes.
View HTML
<section class="ef-rule-builder" aria-labelledby="ex1-rule-builder-rule-builder-title">
<header class="ef-rule-builder__header">
<div>
<h2 id="ex1-rule-builder-rule-builder-title">Applicability rule</h2>
<p>Define when this section is shown.</p>
</div>
<button type="button">Add condition</button>
</header>
<div class="ef-rule-group" data-ef-operator="and">
<div class="ef-rule-group__operator" aria-label="All conditions must be true">AND</div>
<div class="ef-rule-clause">
<label>
<span>Field</span>
<select>
<option>Answer: Q1</option>
</select>
</label>
<label>
<span>Operator</span>
<select>
<option>is equal to</option>
</select>
</label>
<label>
<span>Value</span>
<select>
<option>Yes</option>
</select>
</label>
<button type="button" aria-label="Remove condition">Remove</button>
</div>
</div>
<p class="ef-rule-builder__summary"><strong>Meaning:</strong> Show this section when Answer(Q1) = Yes.</p>
</section>Example 2
Secondary surface
The same contract demonstrated on a secondary Forma surface.
Applicability rule
Define when this section is shown.
AND
Meaning: Show this section when Answer(Q1) = Yes.
View HTML
<section class="ef-rule-builder" aria-labelledby="ex2-rule-builder-rule-builder-title">
<header class="ef-rule-builder__header">
<div>
<h2 id="ex2-rule-builder-rule-builder-title">Applicability rule</h2>
<p>Define when this section is shown.</p>
</div>
<button type="button">Add condition</button>
</header>
<div class="ef-rule-group" data-ef-operator="and">
<div class="ef-rule-group__operator" aria-label="All conditions must be true">AND</div>
<div class="ef-rule-clause">
<label>
<span>Field</span>
<select>
<option>Answer: Q1</option>
</select>
</label>
<label>
<span>Operator</span>
<select>
<option>is equal to</option>
</select>
</label>
<label>
<span>Value</span>
<select>
<option>Yes</option>
</select>
</label>
<button type="button" aria-label="Remove condition">Remove</button>
</div>
</div>
<p class="ef-rule-builder__summary"><strong>Meaning:</strong> Show this section when Answer(Q1) = Yes.</p>
</section>Example 3
Constrained layout
The canonical contract inside a narrow application region.
Applicability rule
Define when this section is shown.
AND
Meaning: Show this section when Answer(Q1) = Yes.
View HTML
<section class="ef-rule-builder" aria-labelledby="ex3-rule-builder-rule-builder-title">
<header class="ef-rule-builder__header">
<div>
<h2 id="ex3-rule-builder-rule-builder-title">Applicability rule</h2>
<p>Define when this section is shown.</p>
</div>
<button type="button">Add condition</button>
</header>
<div class="ef-rule-group" data-ef-operator="and">
<div class="ef-rule-group__operator" aria-label="All conditions must be true">AND</div>
<div class="ef-rule-clause">
<label>
<span>Field</span>
<select>
<option>Answer: Q1</option>
</select>
</label>
<label>
<span>Operator</span>
<select>
<option>is equal to</option>
</select>
</label>
<label>
<span>Value</span>
<select>
<option>Yes</option>
</select>
</label>
<button type="button" aria-label="Remove condition">Remove</button>
</div>
</div>
<p class="ef-rule-builder__summary"><strong>Meaning:</strong> Show this section when Answer(Q1) = Yes.</p>
</section>