Multi-field input: code & specs

This page documents the expected code output and structure necessary to display input rows correctly in the UI.

Multi-field base code

The multi-field input is structured the same as any other input component with the added difference of containing more than one input field inside the .response.
The multi-field input can be used with both text and select fields.

Be sure to include the .multi-input class to the .response wrapper as well as any corrisponding input classes such as .text-input and .select-input.

Validation message
Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="Input-inputlabel-1" class="form-label">Input label</label>
    </div>
    <div class="response multi-input text-input">
        <input type="text" class="form-control" id="Input-inputlabel-1" placeholder="Placeholder">
        <input type="text" class="form-control" id="Input-inputlabel-2" placeholder="Placeholder">
    </div>   
</div>

<div class="input">
    <div class="input-label">
        <label for="Input-inputlabel-1" class="form-label">Input label</label>
    </div>
    <div class="response multi-input select-input text-input">
        <select class="form-select " id="Input-inputlabel-1">
           ...
        </select>
        <input type="text" class="form-control" id="Input-inputlabel-2" placeholder="Placeholder">
    </div>
</div>

Stacked inputs

To stack the inputs in a multi-field input add the class .multi-input-stacked.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="Input-inputlabel-1" class="form-label">Input label</label>
    </div>
    <div class="response multi-input multi-input-stacked text-input">
        <input type="text" class="form-control" id="Input-inputlabel-1" placeholder="Placeholder">
        <input type="text" class="form-control" id="Input-inputlabel-2" placeholder="Placeholder">
    </div>   
</div>