<div class="title-with-helptext-wrapper">
    <h2 class="section-title title-required-sign">Som en del av andre komponenter: </h2>
    <lk-help-text>
        <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </lk-help-text>
</div>

<lk-input-block
    guid="i1"
    input-name="i1"
    label="Label teksten fungerer som felt-overskrift"
    placeholder="Placeholder brukes som eksempel-input"
    required
    required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
    error-message="Error-message vises om det er en feil i brukeren sin input">

    <div slot="help-text">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>

</lk-input-block>


<lk-textarea-block
    guid="i2"
    input-name="i2"
    label="Label teksten fungerer som felt-overskrift"
    placeholder="Placeholder brukes som eksempel-input"
    required
    required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
    error-message="Error-message vises om det er en feil i brukeren sin input">

    <div slot="help-text">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>

</lk-textarea-block>


<form id="test-form" enctype="multipart/form-data" novalidate="" action="" method="post">

    <lk-file-upload guid="fileinput1" input-name="upload1" accept="*" required>
        <div slot="help-text">
            <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
            <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
            </ul>
        </div>
    
    </lk-file-upload>
  
</form> 

<br>


<!-- Manuell implementering: -->

<h2>Som egen komponent: </h2>

<fieldset> 
    <div class="title-with-helptext-wrapper">
        <legend class="title-required-sign">Radio eksempel (default)</legend>
        <lk-help-text>
            <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
            </ul>
            <p><a href="#">Her er en testlenke</a></p>
        </lk-help-text>
    </div>
    <label class="interactive-radio" for="interactive-radio-default">
        <input type="radio" id="interactive-radio-default" name="interactive-radio-default" required>
        <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" required>
        <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>
</fieldset>