BX Swiss Component Library

Input Group

The input group component is used when multiple input fields that belong to the same label should be placed next to each other.

A common use for this component are date and time input fields.

<div class="input-group">
    <div class="input-group__field input-group__field--large">
        <div class="field ">
            <label for="date" class="field__label visually-hidden">Date</label>
            <input id="date" type="text" name="field-name" class="field__input" placeholder="From">
        </div>
    </div>
    <div class="input-group__field">
        <div class="field ">
            <label for="hours" class="field__label visually-hidden">Hours</label>
            <input id="hours" type="text" name="field-name" class="field__input" value="00">
        </div>
    </div>
    <div class="input-group__field">
        <div class="field ">
            <label for="minutes" class="field__label visually-hidden">Minutes</label>
            <input id="minutes" type="text" name="field-name" class="field__input" value="00">
        </div>
    </div>
    <div class="input-group__action">
        <button class="button ">Save</button>
    </div>
</div>
 
<div class="input-group">
    <div class="input-group__field input-group__field--large">
        {{> @field id="date" placeholder="From" label="Date" hideLabel=true}}
    </div>
    <div class="input-group__field">
        {{> @field id="hours" value="00" label="Hours" hideLabel=true}}
    </div>
    <div class="input-group__field">
        {{> @field id="minutes" value="00" label="Minutes" hideLabel=true}}
    </div>
    <div class="input-group__action">
        {{> @button label="Save"}}
    </div>
</div>
 
/* No context defined for this component. */