Inputfelt

Inputfeltene i KVIB bruker CSS-klassen .inputField. Denne klassen har en bredde satt til 100%, slik at bredden på inputfeltet tilpasses ved å legge <div>-klasse inputField__wrapper sammen med <input>, <label>, <span> og <small> i et <div>-element med en bestemt lengde. For å style <label> og <small>-elementet, skal egne CSS-klasser fra Typografi benyttes.

Aktivt inputfelt

Under er et eksempel på et aktivt inputfelt. Brukeren skal få feilmelding dersom feil input mottas, samtidig som utseende skal endres til å være slik som nederste inputfeltet. Dette kan løses med blant annet Javascript. Det er foreløpig ingen eksempelkode på dette i KVIB.

Skriv heia

Skriv heiaexclamationFeilmelding tekst

<div class="kv-form__input__wrapper">
    <label class="label label--sml" for="inputFieldID">Skriv heia</label>
    <input class="kv-form__input" type="text" id="inputFieldID" placeholder="Aktivt tekstfelt"/>
</div>

<div class="kv-form__input__wrapper">
    <label class="label label--sml" for="invalidInputFieldID">Skriv heia</label>
    <input class="kv-form__input" type="text" id="invalidInputFieldID" placeholder="Feilmelding" required/>
    <span class="kv-exclamation"><i class="material-symbols-outlined">exclamation</i></span>
    <small class="kv-form__input__helper__text detail detail--sml">Feilmelding tekst</small>
</div>

Deaktivert inputfelt

Her er et eksempel på et deaktivert inputfelt, både med og uten hjelpetekst.

Skriv heia

Skriv heia

<div class="kv-form__input__wrapper">
     <label class="label label--sml" for="disabledInputFieldText">Skriv heia</label>
    <input class="kv-form__input" type="text" id="disabledInputFieldText" placeholder="Jeg er deaktivert" disabled/>
</div>

<div class="kv-form__input__wrapper">
     <label class="label label--sml" for="disabledInputFieldNoText">Skriv heia</label>
    <input class="kv-form__input" type="text" id="disabledInputFieldNoText" disabled/>
</div>