Input block

Input elementer primært for dialogtjenesetene

Input block

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Help-text vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Help-text brukes.

PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.

<lk-input-block
    guid="spm1"
    input-name="spm1"
    label="Label teksten fungerer som felt-overksrifter"
    placeholder="Placeholder brukes som eksempel-input"
    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"
></lk-input-block>


<lk-input-block
    guid="spm2"
    input-name="spm2"
    label="Label teksten fungerer som felt-overksrifter"
    placeholder="Placeholder brukes som eksempel-input"
    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>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-input-block>


<lk-input-block
    guid="spm3"
    input-name="spm3"
    label="Label teksten fungerer som felt-overksrifter"
    placeholder="Placeholder brukes som eksempel-input"
    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">

    <p slot="help-text">PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.</p>

</lk-input-block>