<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>