Variant Selector demo


Type A:
Type B:
Add "A" Add "B"
<form>
    <div data-array="Items" data-remove="1" data-placeholder="No items, click add below!" class="form-group">
        <div class="a alert alert-info" data-variant="A">
            Type A:
            <select name="ObjectVariant" class="input-sm" data-action="variant">
                <option>A</option>
                <option>B</option>
            </select><br>
            <label>Enter title</label>
            <input name="Title" placeholder="Enter title"/>
        </div>
        <div class="b alert alert-success" data-variant="B">
            Type B:
            <select name="ObjectVariant" class="input-sm" data-action="variant">
                <option>B</option>
                <option>A</option>
            </select>
            <input name="Title" placeholder="Enter title" style="width:20em;display:inline-block"/>
            <input name="Date" placeholder="Enter date" type="date" style="width:auto;display:inline-block"/>
        </div>
    </div>
    <a class="btn btn-info" data-action="add" data-variant="A" data-target="Items">Add &quot;A&quot;</a>
    <a class="btn btn-success" data-action="add" data-variant="B" data-target="Items">Add &quot;B&quot;</a>
</form>
select {
    width:auto !important;
    display:inline-block !important;
}
No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template