Input

Preview:

Configuration:

Output:

Vue component

            
<Input
    inputType="text"
    labelText="Label"
    inputInMode="text"
    :hasError="false"
    :disabled="false"
/>
            
        

Raw HTML

            
<div class="form-group">
    <div class="input ">
        <input type="text" inputmode="text" >
        <label for="text">Label</label>
    </div>
</div>
            
        

Comments

Any inputs are usualy inside a grid > gridItem > input.
A input group is always surrounded by a fieldset :

Vue component

            
<fieldset class="layout-lg-my">
    <legend class="font-weight-bold spacing-16-mb">
        Kontaktinformation
    </legend>
    <Grid>
        <GridItem v-bind:size="{ sm: 6 }">
            <Input labelText="Fornavn" inputType="text" inputInMode="text" :hasError="true" />
        </GridItem>
        <GridItem v-bind:size="{ sm: 6 }">
            <Input labelText="Efternavn" inputType="text" inputInMode="text" />
        </GridItem>
    </Grid>
</fieldset>
            
        

Raw HTML

            
<fieldset class="layout-lg-my">
    <legend class="font-weight-bold spacing-16-mb">
        Kontaktinformation
    </legend>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input has-error">
                    <input type="text" inputmode="text">
                    <label for="text">Fornavn</label>
                    <span>Feltet kunne ikke valideres</span></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input">
                    <input type="text" inputmode="text">
                    <label for="text">Efternavn</label>
                </div>
            </div>
        </div>
    </div>
</fieldset>