Hjelpetekst

Normal

Hjelpetekst brukes når brukeren kan trenge mer informasjon, men hvor det ikke er naturlig å bruke plass på det i grensesnittet. Dette kan for eksempel være for å forklare vanskelige begreper, gi veiledning i utfylling av skjema-felter eller utdype bakgrunn for et regelverk.

<Hjelpetekst>Innholdet vil vises når brukeren klikker på knappen.</Hjelpetekst>
 Kopiert! 

Kombinasjon med skjemafelt

For å enkelt knytte Hjelpetekst-komponenten til et skjemafelt kan komponenten sendes inn via label-propen til skjemafeltet. Se Tilgjengelighet-fanen for andre måter å lage en assosiasjon mellom Hjelpetekst-komponenten og elementet den forsøker å beskrive.

<Input
  id="min-input"
  label={
    <div style={{ display: "flex" }}>
      Fødselsnummer
      <Hjelpetekst>
        Innholdet vil vises når brukeren klikker på knappen.
      </Hjelpetekst>
    </div>
  }
/>
 Kopiert! 

Posisjon av popup

Du kan bestemme hvor popup-ruten dukker opp.

<Hjelpetekst type="over">Denne vil åpnes over knappen.</Hjelpetekst>
<Hjelpetekst type="over-venstre">Denne vil åpnes over knappen, justert fra venstre kant.</Hjelpetekst>
<Hjelpetekst type="over-hoyre">Denne vil åpnes over knappen, justert fra høyre kant.</Hjelpetekst>
<Hjelpetekst type="under">Denne vil åpnes under knappen.</Hjelpetekst>
<Hjelpetekst type="under-venstre">Denne vil åpnes under knappen, justert fra venstre kant.</Hjelpetekst>
<Hjelpetekst type="under-hoyre">Denne vil åpnes under knappen, justert fra høyre kant.</Hjelpetekst>
<Hjelpetekst type="venstre">Denne vil åpnes til venstre for knappen.</Hjelpetekst>
<Hjelpetekst type="hoyre">Denne vil åpnes til høyre for knappen.</Hjelpetekst>
 Kopiert!