Source
<fieldset data-kit-role="conditions-builder" id="rule">
<legend>Bookings to follow up</legend>
<div data-kit-region="group">
<div data-kit-region="match">
<div data-kit-role="form-group" id="rule-match">
<fieldset>
<legend id="rule-match-label">Match</legend>
<div data-kit-role="segmented-control" id="rule-match-control">
<label data-kit-region="segment"><input type="radio" name="match" value="all" checked><span data-kit-region="segment-name">All</span></label>
<label data-kit-region="segment"><input type="radio" name="match" value="any"><span data-kit-region="segment-name">Any</span></label>
</div>
</fieldset>
<output for="rule-match-control">All</output>
</div>
</div>
<ol data-kit-region="conditions">
<li data-kit-region="condition">
<div data-kit-role="form-group" id="rule-1-field">
<label for="rule-1-field-control">Condition 1 field</label>
<div data-kit-region="select"><select id="rule-1-field-control" name="conditions[0][field]"><option value="status" selected>Status</option><option value="amount">Amount due</option><option value="room">Room</option><option value="hirer">Hirer</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-1-field-control">Status</output>
</div>
<div data-kit-role="form-group" id="rule-1-operator">
<label for="rule-1-operator-control">Condition 1 operator</label>
<div data-kit-region="select"><select id="rule-1-operator-control" name="conditions[0][operator]"><option value="is" selected>is</option><option value="is-not">is not</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-1-operator-control">is</output>
</div>
<div data-kit-role="form-group" id="rule-1-value">
<label for="rule-1-value-control">Condition 1 value</label>
<div data-kit-region="select"><select id="rule-1-value-control" name="conditions[0][value]"><option value="unpaid" selected>Unpaid</option><option value="paid">Paid</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-1-value-control">Unpaid</output>
</div>
<button type="button" id="rule-remove-status" data-kit-state="inert" disabled aria-describedby="rule-remove-status-words" data-kit-role="icon-action" aria-label="Remove Status"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
<p data-kit-region="words" id="rule-remove-status-words">Removing the status condition waits until it is checked.</p>
</li>
<li data-kit-region="condition">
<div data-kit-role="form-group" id="rule-2-field">
<label for="rule-2-field-control">Condition 2 field</label>
<div data-kit-region="select"><select id="rule-2-field-control" name="conditions[1][field]"><option value="status">Status</option><option value="amount" selected>Amount due</option><option value="room">Room</option><option value="hirer">Hirer</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-2-field-control">Amount due</output>
</div>
<div data-kit-role="form-group" id="rule-2-operator">
<label for="rule-2-operator-control">Condition 2 operator</label>
<div data-kit-region="select"><select id="rule-2-operator-control" name="conditions[1][operator]"><option value="is">is</option><option value="more" selected>is more than</option><option value="less">is less than</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-2-operator-control">is more than</output>
</div>
<div data-kit-role="form-group" data-kit-width="medium" id="rule-2-value">
<label for="rule-2-value-control">Condition 2 value</label>
<input id="rule-2-value-control" name="conditions[1][value]" type="text" inputmode="decimal" value="500.00">
<output for="rule-2-value-control">500.00</output>
</div>
<button type="button" data-kit-role="icon-action" aria-label="Remove Amount due"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</li>
<li data-kit-region="group">
<div data-kit-region="match">
<div data-kit-role="form-group" id="rule-group-match">
<fieldset>
<legend id="rule-group-match-label">Match</legend>
<div data-kit-role="segmented-control" id="rule-group-match-control">
<label data-kit-region="segment"><input type="radio" name="group[match]" value="all"><span data-kit-region="segment-name">All</span></label>
<label data-kit-region="segment"><input type="radio" name="group[match]" value="any" checked><span data-kit-region="segment-name">Any</span></label>
</div>
</fieldset>
<output for="rule-group-match-control">Any</output>
</div>
</div>
<button type="button" id="rule-remove-group" data-kit-state="inert" disabled aria-describedby="rule-remove-group-words" data-kit-role="secondary-action"><span data-kit-region="label">Remove group</span></button>
<p data-kit-region="words" id="rule-remove-group-words">Removing this group waits until its conditions are checked.</p>
<ol data-kit-region="conditions">
<li data-kit-region="condition">
<div data-kit-role="form-group" id="rule-group-1-field">
<label for="rule-group-1-field-control">Group condition 1 field</label>
<div data-kit-region="select"><select id="rule-group-1-field-control" name="group[conditions][0][field]"><option value="status">Status</option><option value="amount">Amount due</option><option value="room" selected>Room</option><option value="hirer">Hirer</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-group-1-field-control">Room</output>
</div>
<div data-kit-role="form-group" id="rule-group-1-operator">
<label for="rule-group-1-operator-control">Group condition 1 operator</label>
<div data-kit-region="select"><select id="rule-group-1-operator-control" name="group[conditions][0][operator]"><option value="is" selected>is</option><option value="is-not">is not</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-group-1-operator-control">is</output>
</div>
<div data-kit-role="form-group" id="rule-group-1-value">
<label for="rule-group-1-value-control">Group condition 1 value</label>
<div data-kit-region="select"><select id="rule-group-1-value-control" name="group[conditions][0][value]"><option value="garden" selected>Garden room</option><option value="hall">Main hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-group-1-value-control">Garden room</output>
</div>
<button type="button" data-kit-role="icon-action" aria-label="Remove Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</li>
<li data-kit-region="condition">
<div data-kit-role="form-group" id="rule-group-2-field">
<label for="rule-group-2-field-control">Group condition 2 field</label>
<div data-kit-region="select"><select id="rule-group-2-field-control" name="group[conditions][1][field]"><option value="status">Status</option><option value="amount">Amount due</option><option value="room">Room</option><option value="hirer" selected>Hirer</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-group-2-field-control">Hirer</output>
</div>
<div data-kit-role="form-group" id="rule-group-2-operator">
<label for="rule-group-2-operator-control">Group condition 2 operator</label>
<div data-kit-region="select"><select id="rule-group-2-operator-control" name="group[conditions][1][operator]"><option value="is">is</option><option value="contains" selected>contains</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="rule-group-2-operator-control">contains</output>
</div>
<div data-kit-role="form-group" data-kit-width="medium" id="rule-group-2-value">
<label for="rule-group-2-value-control">Group condition 2 value</label>
<input id="rule-group-2-value-control" name="group[conditions][1][value]" type="text" value="school">
<output for="rule-group-2-value-control">school</output>
</div>
<button type="button" data-kit-role="icon-action" aria-label="Remove Hirer"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</li>
</ol>
<button type="button" id="rule-nested-add" data-kit-state="inert" disabled aria-describedby="rule-nested-add-words" data-kit-role="secondary-action"><span data-kit-region="label">Add condition</span></button>
<p data-kit-region="words" id="rule-nested-add-words">Adding to this group waits until its conditions are checked.</p>
</li>
</ol>
<button type="button" id="rule-add" data-kit-state="inert" disabled aria-describedby="rule-add-words" data-kit-role="secondary-action"><span data-kit-region="label">Add condition</span></button>
<p data-kit-region="words" id="rule-add-words">Adding waits until these conditions are checked.</p>
</div>
<p data-kit-region="reading">Unpaid bookings over <span data-kit-role="amount">£500.00</span>, in the Garden room or with a hirer whose name contains “school”.</p>
</fieldset>