Skjemaelementer Skjemaelementer og tilhørende elementer som brukes til utfylling av skjemaer og i dialogtjenester.

Skjemaelementer og tilhørende elementer som brukes til utfylling av skjemaer og i dialogtjenester.

Ny skjema elementer

Du må fylle ut navnet ditt: minst 5 tegn

Du må gi beskrivelse!


Checkbox
Checkbox eksempeler





Radio button
Radio eksempel (default)


Radio eksempel (blå)


Radio eksempel (gønn)


Radio eksempel (rød)


Select option


Dropdown links
Dette er lenk 1 Dette er lenk 2 Dette er lenk 3 
<div class="input-block-interactive input-block-interactive--required">
    <label for="first-name">Fornavn og mellomnavn</label>
    <input class="input-interactive" type="text" id="first-name" name="firstname" minlength="5" required />
    <p class="error">
        <span>
            Du må fylle ut navnet ditt: minst 5 tegn
        </span>
    </p>
</div>

<div class="grid margin-y--base">
    <div class="span-half input-block-interactive">
        <label for="adress">Addresse</label>
        <input class="input-interactive" type="text" id="adress" name="firstname" />
        <p class="error"></p>
    </div>
    <div class="span-half input-block-interactive">
        <label for="organizatiob">Organizasjon navn</label>
        <input class="input-interactive" type="text" id="organizatiob" name="firstname" />
        <p class="error"></p>
    </div>
</div>

<div class="input-block-interactive input-block-interactive--required">
    <label for="description">Beskrivelse</label>
    <textarea class="input-interactive" row="1" id="description" name="description" required></textarea>
    <p class="error">
        <span>Du må gi beskrivelse!</span>
    </p>
</div>
<br>



<h5 class="small-title">Checkbox</h5>

<fieldset>
    <legend>Checkbox eksempeler</legend>
    <label class="interactive-checkbox" for="interactivecheckbox-default">
        <input type="checkbox" id="interactivecheckbox-default" name="interactivecheckbox-default">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med mork blå backgrunn (default)</span>
    </label>

    <br>
    <label class="interactive-checkbox" for="interactive-checkbox-blue">
        <input type="checkbox" id="interactive-checkbox-blue" name="interactive-checkbox-blue">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-blue path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med blå backgrunn</span>
    </label>
    <br>
    <label class="interactive-checkbox" for="interactive-checkbox-green">
        <input type="checkbox" id="interactive-checkbox-green" name="interactive-checkbox-green">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-green path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med grønn backgrunn</span>
    </label>
    <br>

    <label class="interactive-checkbox" for="interactivecheckbox-red">
        <input type="checkbox" id="interactivecheckbox-red" name="interactivecheckbox-red">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-red path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med råd backgrunn</span>
    </label>

    <br><br>

    <label class="interactive-checkbox interactive-checkbox-trigger" for="interactivecheckbox-default-trigger">
        <input type="checkbox" id="interactivecheckbox-default-trigger" name="interactivecheckbox-default-trigger">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med mork blå backgrunn (default)</span>
    </label>

    <label class="interactive-checkbox interactive-checkbox-trigger" for="interactive-checkbox-blue-trigger">
        <input type="checkbox" id="interactive-checkbox-blue-trigger" name="interactive-checkbox-blue-trigger">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-blue path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med blå backgrunn</span>
    </label>

    <label class="interactive-checkbox interactive-checkbox-trigger" for="interactive-checkbox-green-trigger">
        <input type="checkbox" id="interactive-checkbox-green-trigger" name="interactive-checkbox-green-trigger">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-green path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med grønn backgrunn</span>
    </label>

    <label class="interactive-checkbox interactive-checkbox-trigger" for="interactivecheckbox-red-trigger">
        <input type="checkbox" id="interactivecheckbox-red-trigger" name="interactivecheckbox-red-trigger">
        <span class="interactive-checkbox__span"><svg aria-hidden="true" focusable="false" role="presentation"
                version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 27.4 27.4" xml:space="preserve">
                <path class="interactive-checkbox__path" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>

                <path class="interactive-checkbox__path-checked-red path-checked" d="M24.6,25.5H2.7c-0.5,0-0.9-0.4-0.9-0.9V2.7c0-0.5,0.4-0.9,0.9-0.9h21.9c0.5,0,0.9,0.4,0.9,0.9v21.9
           C25.5,25.1,25.1,25.5,24.6,25.5z"></path>
                <path class="interactive-checkbox__path-checked-tick path-checked"
                    d="M8,14.2l2.4,3.5c0.3,0.5,1,0.6,1.5,0.3c0.1-0.1,0.2-0.1,0.3-0.2L21,6.8"></path>
            </svg>Checkbox med råd backgrunn</span>
    </label>


</fieldset>

<br>
<h5 class="small-title">Radio button</h5>

<fieldset>

    <legend>Radio eksempel (default)</legend>
    <label class="interactive-radio" for="interactive-radio-default">
        <input type="radio" id="interactive-radio-default" name="interactive-radio-default">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker til bruk av mine data</span>
    </label>
    <br>

    <label class="interactive-radio" for="interactive-radio-default2">
        <input type="radio" id="interactive-radio-default2" name="interactive-radio-default">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker ikke til bruk av mine data</span>
    </label>

    <br><br>

    <legend>Radio eksempel (blå)</legend>
    <label class="interactive-radio" for="interactive-radio-blue">
        <input type="radio" id="interactive-radio-blue" name="interactive-radio-blue">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-blue" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked-blue path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker til bruk av mine data</span>
    </label>
    <br>

    <label class="interactive-radio" for="interactive-radio-blue2">
        <input type="radio" id="interactive-radio-blue2" name="interactive-radio-blue">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-blue" cx="12" cy="14" r="10"></circle>
                <circle class="interactive-radio__path-checked-blue path-checked" cx="12" cy="14" r="10"></circle>
            </svg>Jeg samtykker ikke til bruk av mine data</span>
    </label>
    <br><br>
    <legend>Radio eksempel (gønn)</legend>
    <label class="interactive-radio" for="interactive-confirm-radio-green">
        <input type="radio" id="interactive-confirm-radio-green" name="interactive-confirm-radio-green">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-green" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked-green path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker til bruk av mine data</span>
    </label>
    <br>

    <label class="interactive-radio" for="interactive-confirm-radio-green2">
        <input type="radio" id="interactive-confirm-radio-green2" name="interactive-confirm-radio-green">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-green" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked-green path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker ikke til bruk av mine data</span>
    </label>

    <br><br>
    <legend>Radio eksempel (rød)</legend>
    <label class="interactive-radio" for="interactive-radio-red">
        <input type="radio" id="interactive-radio-red" name="interactive-radio-red">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-red" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked-red path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker til bruk av mine data</span>
    </label>
    <br>

    <label class="interactive-radio" for="interactive-radio-red2">
        <input type="radio" id="interactive-radio-red2" name="interactive-radio-red">
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">

                <circle class="interactive-radio__path-red" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked-red path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker ikke til bruk av mine data</span>
    </label>

</fieldset>
<br><br>

<h5 class="small-title">Select option</h5>

<div class="interactive-select">
    <label for="options">Favorittfrukt (grå)</label>
    <select name="options" id="options">
        <option value="" disabled selected>Velg din favorittfrukt</option>
        <option value="banana">Banan</option>
        <option value="apple">Eple</option>
        <option value="pear">Pære</option>
    </select>
</div>

<div class="interactive-select interactive-select__blue">
    <label for="options">Favorittfrukt (blå)</label>
    <select name="options" id="options">
        <option value="" disabled selected>Velg din favorittfrukt</option>
        <option value="banana">Banan</option>
        <option value="apple">Eple</option>
        <option value="pear">Pære</option>
    </select>
</div>

<div class="interactive-select interactive-select__green">
    <label for="options">Favorittfrukt (grønn)</label>
    <select name="options" id="options">
        <option value="" disabled selected>Velg din favorittfrukt</option>
        <option value="banana">Banan</option>
        <option value="apple">Eple</option>
        <option value="pear">Pære</option>
    </select>
</div>

<br><br>
<h5 class="small-title">Dropdown links</h5>

<div class="interactive-dropdown">
    <button>Dropdown</button>
    <div class="interactive-dropdown__items-container no-display" data-expanded="false">
        <a class="dropdown-link" href="#">Dette er lenk 1</a>
        <a class="dropdown-link" href="#">Dette er lenk 2</a>
        <a class="dropdown-link" href="#">Dette er lenk 3</a>
    </div>
</div>

Tekstfelt

<div class="input-block">
  <label for="firstname">Fornavn</label>
  <input type="text" id="firstname" name="firstname" pattern="[a-zA-Z]+" placeholder="Fornavn og eventuelle mellomnavn">
</div>

Tekstområde

<div class="input-block">
  <label for="description">Beskrivelse</label>
  <textarea name="description" id="description" placeholder="Beskriv dagens situasjon"></textarea>
</div>

Datovelger

Datovelgere benytter det innebyggede grensesnittet i nettleseren, slik at vi ikke har noen egen/spesialtilpasset JavaScript-komponent for dette. Dette sikrer at brukeren får datovelgeren på det språket de bruker på datamaskinen sin og at den fungerer optimalt også på mobile enheter. 

<div class="input-block">
  <label for="date">Dato</label>
  <input type="date" id="date" name="date" placeholder="Ønsket dato">
</div>

Nedtrekksliste

<div class="input-block">
  <label for="options">Favorittfrukt</label>
  <select name="options" id="options">
    <option value="" disabled selected>Velg din favorittfrukt</option>
    <option value="banana">Banan</option>
    <option value="apple">Eple</option>
    <option value="pear">Pære</option>
  </select>
</div>

Vanlige avkrysningsbokser





Checkbox/button toggle







Checkbox tree












<label class="checkbox" for="confirm1">
  <input type="checkbox" id="confirm1" name="confirm1">
  <span class="checkbox__label">Jeg samtykker til bruk av mine data</span>
</label><br>

<label class="checkbox" for="confirm2">
  <input type="checkbox" id="confirm2" name="confirm2">
  <span class="checkbox__label">Jeg ønsker å bli kontaktet på telefon</span>
</label><br>

<label class="checkbox" for="confirm3">
  <input type="checkbox" id="confirm3" name="confirm3">
  <span class="checkbox__label">Jeg ønsker å bli kontaktet på e-post</span>
</label>

<br><br>
<h3 id="checkbox-toggle" class="component-title">Checkbox/button toggle</h3>
<br>

<label class="checkbox-toggle margin-bottom--base">
  <input type="checkbox">
  <span class="checkbox-toggle__slider slider-blue">Toggle</span>
</label>

<br>

<label class="checkbox-toggle margin-bottom--base">
  <input type="checkbox" checked>
  <span class="checkbox-toggle__slider slider-dark-blue">Toggle</span>
</label>

<br>

<label class="checkbox-toggle margin-bottom--base">
  <input type="checkbox">
  <span class="checkbox-toggle__slider slider-green">Toggle</span>
</label>

<br>

<label class="checkbox-toggle margin-bottom--base">
  <input type="checkbox">
  <span class="checkbox-toggle__slider slider-orange">Toggle</span>
</label>

<br><br>

<h3 class="component-title">Checkbox tree</h3>

<br>

<!-- <label class="checkbox" for="checkbox-test">
  <input type="checkbox" id="checkbox-test" name="checkbox-test" class="checkbox-test">
  <span class="checkbox__label">Controller for Checbox top</span>
</label><br>

<br><br> -->

<div class="tree-wrapper">

  <label class="checkbox" for="checkbox-1">
    <input type="checkbox" id="checkbox-1" name="checkbox-1">
    <span class="checkbox__label  node-tree">Checbox top</span>
  </label><br>

  <div class="subtree no-display padding-left--medium padding--no-side-mobile">
    <label class="checkbox" for="checkbox-2">
      <input type="checkbox" id="checkbox-2" name="checkbox-2">
      <span class="checkbox__label">Checkbox 1</span>
    </label><br>
    <label class="checkbox" for="checkbox-3">
      <input type="checkbox" id="checkbox-3" name="checkbox-3">
      <span class="checkbox__label">Checkbox 2</span>
    </label><br>
    <label class="checkbox" for="checkbox-4">
      <input type="checkbox" id="checkbox-4" name="checkbox-4">
      <span class="checkbox__label  node-tree">Checkbox 3 - top</span>
    </label><br>

    <div class="subtree no-display padding-left--medium padding--no-side-mobile">
      <label class="checkbox" for="checkbox-4-1">
        <input type="checkbox" id="checkbox-4-1" name="checkbox-4-1">
        <span class="checkbox__label">Checkbox 4</span>
      </label><br>
      <label class="checkbox" for="checkbox-4-2">
        <input type="checkbox" id="checkbox-4-2" name="checkbox-4-2">
        <span class="checkbox__label">Checkbox 5</span>
      </label><br>
    </div>
  </div>

  <label class="checkbox" for="checkbox-5">
    <input type="checkbox" id="checkbox-5" name="checkbox-5">
    <span class="checkbox__label  node-tree">Checkbox top 2</span>
  </label><br>
  <div class="subtree no-display padding-left--medium padding--no-side-mobile">
    <label class="checkbox" for="checkbox-6">
      <input type="checkbox" id="checkbox-6" name="checkbox-6">
      <span class="checkbox__label">Checkbox 6</span>
    </label><br>
    <label class="checkbox" for="checkbox-7">
      <input type="checkbox" id="checkbox-7" name="checkbox-7">
      <span class="checkbox__label">Checkbox 7</span>
    </label><br>

    <br>

    <lk-input-block guid="fullname1" input-name="fullname1" input-type="text" label="Navn og etternavn"
      placeholder="Ditt fulle navn">
    </lk-input-block>

    <lk-input-block class="add-required" guid="anothername" input-name="anothername" input-type="text"
      label="Navn og etternavn" placeholder="Andre navn" error-message="Du må fylle ut denne felt">
    </lk-input-block>

    <lk-textarea-block class="add-required" guid="message" input-name="message" label="Melding"
      placeholder="Skriv inn en beskjed her" error-message="Du må fylle ut en beskjed å sende inn">
    </lk-textarea-block>

  </div>

</div>

Store avkrysningsbokser

De store avkrysningsboksene kan ha label som strekker seg over flere linjer. Selve "boksen" vil være midtstilt vertikalt uavhengig av høyde. Merk at for å få korrekte avrundede hjørner kun på første og siste boks må avkrysningsboksene ligge i tilhørende <fieldset> med klassenavnet triggers.

Velg minst ett skolebarn 
<fieldset class="triggers">
  <legend>Velg minst ett skolebarn</legend>
  <label class="checkbox checkbox--trigger" for="child1">
    <input type="checkbox" id="child1" name="child1">
    <span class="checkbox__label">Max Evercreek, Foxhollow Forest 7B</span>
  </label>

  <label class="checkbox checkbox--trigger" for="child2">
    <input type="checkbox" id="child2" name="child2">
    <span class="checkbox__label">Theo Slater, Foxhollow Forest 7B</span>
  </label>
</fieldset>

Radioknapper





Radio button tree





Du har valgt appelsin som favourite frukt

Appelsin smake bra!

Du har valgt banan som favourite frukt

Banan smake bra!

Du har valgt eple som favourite frukt

Eple smake bra!

Du har valgt kiwi som favourite frukt

Kiwi smake bra!

<label class="radio" for="fruit1">
  <input type="radio" id="fruit1" name="favorite-fruit">
  <span class="radio__label">Eple</span>
</label><br>

<label class="radio" for="fruit2">
  <input type="radio" id="fruit2" name="favorite-fruit">
  <span class="radio__label">Pære</span>
</label><br>


<label class="radio" for="fruit3">
  <input type="radio" id="fruit3" name="favorite-fruit">
  <span class="radio__label">Appelsin</span>
</label><br>


<label class="radio" for="fruit4">
  <input type="radio" id="fruit4" name="favorite-fruit">
  <span class="radio__label">Banan</span>
</label><br>


<h4 id="radio-tree" class="section-title margin-top--large">Radio button tree</h4>

<div class="tree-radio-wrapper">

  <!--In case that we want to use lk-radio-group-->
  <!-- <lk-radio-group class="tree-radio-controller" radio-labels='["Eple1","Bannan1","Kiwi1","Appelsin1"]'
    group-name="farge" values='["apple","banana","kiwi","orange"]' guid-list='["Red2","Green2","Blue2","Orange2"]'
    group-label="Hva er din favoritte frukt?" required=true error-message="Du må velge en frukt!">
  </lk-radio-group> -->

  <div class="tree-radio-controller">
    <label class="radio" for="fruit-tree1">
      <input type="radio" class="" id="fruit-tree1" name="favorite-fruit-tree" value="orange">
      <span class="radio__label">Appelsin</span>
    </label><br>

    <label class="radio" for="fruit-tree2">
      <input type="radio" id="fruit-tree2" name="favorite-fruit-tree" value="banana">
      <span class="radio__label">Banan</span>
    </label><br>

    <label class="radio" for="fruit-tree3">
      <input type="radio" id="fruit-tree3" name="favorite-fruit-tree" value="apple">
      <span class="radio__label">Eple</span>
    </label><br>

    <label class="radio" for="fruit-tree4">
      <input type="radio" id="fruit-tree4" name="favorite-fruit-tree" value="kiwi">
      <span class="radio__label">Kiwi</span>
    </label><br>
  </div>

  <div id="orange-radio-sub" class="subtree no-display background--tint-blue padding--base margin-top--base">
    <h5 class="small-title">Du har valgt appelsin som favourite frukt</h5>
    <p>Appelsin smake bra!</p>
  </div>
  <div id="banana-radio-sub" class="subtree no-display background--tint-blue padding--base margin-top--base">
    <h5 class="small-title">Du har valgt banan som favourite frukt</h5>
    <p>Banan smake bra!</p>
  </div>
  <div id="apple-radio-sub" class="subtree no-display background--tint-blue padding--base margin-top--base">
    <h5 class="small-title">Du har valgt eple som favourite frukt</h5>
    <p>Eple smake bra!</p>
  </div>
  <div id="kiwi-radio-sub" class="subtree no-display background--tint-blue padding--base margin-top--base">
    <h5 class="small-title">Du har valgt kiwi som favourite frukt</h5>
    <p>Kiwi smake bra!</p>
  </div>

</div>

Validering

Webkomponentene for utfyllingsfelter har validering i henhold til HTML5 constraint validation, og validering skjer når brukeren endrer verdien i feltet. Merk at webkomponentene inneholder label, utfyllingfelt og feilmelding i én og samme komponent.

Dette er subtext
Dette er subtext 


<form>
  <lk-input-block guid="name" input-name="name" input-type="text" label="Navn" placeholder="Ditt fulle navn"
    error-message="Du må fylle ut navnet ditt: minst 5 tegn" required="true" min-length="5">
    <div>
      <span>Dette er subtext</span>
    </div>
  </lk-input-block>

  <lk-textarea-block guid="message" input-name="message" label="Melding" placeholder="Skriv inn en beskjed her"
    error-message="Du må fylle ut en beskjed å sende inn" required="true">
    <div>
      <span>Dette er subtext</span>
    </div>
  </lk-textarea-block>


  <div class="grid" style="align-items: center;">
    <div class="span-three-quarters span-two-thirds-on-tablet">
      <lk-input-block readonly value="web og portal" guid="name" input-name="name" input-type="text" label="Navn"
        placeholder="Ditt fulle navn" error-message="Du må fylle ut navnet ditt: minst 5 tegn" min-length="5">
      </lk-input-block>
    </div>
    <div class="span-quarter span-third-on-tablet">
      <button class="button button--large button--primary">
        <span class="button__text">Knap ved side </span>
      </button>
    </div>
  </div>


  <lk-checkbox guid="test" input-name="test" value="test" error-message="Du må velge denne checkbox"
    label="This is test">
  </lk-checkbox>

  <br>

  <lk-input-block initial-valid="false" guid="fullname" input-name="fullname" input-type="text"
    label="Navn og etternavn" placeholder="Ditt fulle navn" error-message="Du må fylle ut denne felt" required="true">
  </lk-input-block>

  <br>


  <lk-checkbox-group checkbox-labels='["Eple","Bannan","Kiwi","Appelsin"]'
    values='["Eple1","Bannan1","Kiwi1","Appelsin1"]' required=true>
  </lk-checkbox-group>



  <lk-radio-group radio-labels='["Eple1","Bannan1","Kiwi1","Appelsin1"]' group-name="farge" checked-item="Eple"
    values='["Eple","Bannan","Kiwi","Appelsin"]' guid-list='["Red2","Green2","Blue2","Orange2"]'
    group-label="Hva er din favoritte frukt?" required=true error-message="Du må velge en frukt!">
  </lk-radio-group>


</form>