Input

Input brukes når vi har behov for å ta imot tekst fra sluttbruker.

Normal

I sin enkleste form er Input bare et enkelt tekstinputfelt.

<Input />

Kopiert!

Med label

info
WCAG 3.3.2 krever at alle skjemafelter skal ha en tilhørendelabel.

Label som prop

Den enkleste (og anbefalte) måten å gi inputfeltet en label er å angi dette gjennom komponentens label-prop. Dette vil rendre en <label> rett over feltet, med korrekt CSS-klasse og for-attributt ferdig påført:

<Input label="Mitt skjemafelt:" />

Kopiert!

Label som komponent

Du kan også importere Label-komponenten og manuelt sette denne utenfor inputfeltet:

advarsel
Husk å gi Label-komponenten korrekt for/htmlFor-attributt (som skal ha samme verdi som inputfeltets id-attributt) slik at disse blir sammenkoblet riktig.
import { Label, Input } from 'nav-frontend-skjema';

<Label htmlFor="min-input">Mitt skjemafelt:</Label>
<Input id="min-input" />

Kopiert!

Dette kan være nødvendig om man f.eks. vil sette label til venstre for inputfeltet:

import { Label, Input } from "nav-frontend-skjema";

<div style={{ display: "flex", alignItems: "center" }}>
  <Label htmlFor="min-input-2" style={{ margin: 0, marginRight: "1rem" }}>
    Mitt skjemafelt:
  </Label>
  <div style={{ flexGrow: 1 }}>
    <Input id="min-input-2" />
  </div>
</div>;

Kopiert!

Label som aria-attributter

Unntaksvis kan man også angi label via inputfeltets aria-label- eller aria-labelledby-attributter. I slike tilfeller kan det være greit å supplere inputfeltet med et placeholder-attributt også.

advarsel
Dette er foreløpig kun tillatt på inputfelter inne i tabell-rader eller lignende tilfeller hvor det er veldig vanskelig å ha en synlig tekst-label i nærheten av inputfeltet. Skal ikke misbrukes.

Før man velger å ta i bruk placeholders, les gjennom hvorfor på placeholders tilgjengelighets-sider
<Input aria-label="Mitt skjemafelt:" placeholder="Her kan det skrives" />

eller

<Input aria-labelledby="id-til-html-element-med-label-tekst" placeholder="Her kan det skrives" />

Kopiert!

Nummer

Hvis man ønsker at brukeren skal sette inn tall og da gi dem talltastaturet på mobil, ta i bruk inputMode="numeric" pattern="[0-9]*"

info
Les mer om hvorfor man bør bruke inputMode og pattern ovenfor type="number" komponentens tilgjengelighets-sider.
<Input label="Inputfelt-nummer" inputMode="numeric" pattern="[0-9]*" />

Kopiert!

Kombinasjon med Hjelpetekst

info
Les mer om hvorfor det kan være lurt å sende Hjelpetekst inn med label-propen på komponentens tilgjengelighets-sider.
<Input
  label={
    <div style={{ display: "flex" }}>
      Inputfelt-label
      <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
        Innholdet vil vises når brukeren klikker på knappen.
      </Hjelpetekst>
    </div>
  }
/>

Kopiert!

Disabled

advarsel
Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen grunn ikke er tillatt. Ler mer om dette på siden vår om `disabled`.
<Input label="Inputfelt-label" disabled />

Kopiert!

Innhold mellom label og skjemafelt

Bruk description-propen for å legge inn egendefinert HTML-innhold mellom labelen og skjemafeltet.

En kort beskrivelse av feltet
<Input label="Inputfelt-label" description="En kort beskrivelse av feltet" />

Kopiert!

Feilmarkering

Normal

Her er det noe feil

<Input label="Inputfelt-label" feil="Her er det noe feil" />

Kopiert!

Forenklet

<Input feil />

Kopiert!

Lengde

Lengden på inputfelt skal tilpasses det antallet tegn bruker skal fylle inn. For å holde skjemaene ryddige og oversiktlige, samt for å lette utviklingen er det satt et sett med faste bredder. Velg den bredden som passer best til dataene bruker skal fylle inn.

<Input label={'Fullbredde inputfelt:'} bredde="fullbredde" />
<Input label={'XXL inputfelt'} bredde="XXL" />
<Input label={'XL inputfelt'} bredde="XL" />
<Input label={'L inputfelt'} bredde="L" />
<Input label={'M inputfelt'} bredde="M" />
<Input label={'S inputfelt'} bredde="S" />
<Input label={'XS inputfelt'} bredde="XS" />
<Input label={'XXS inputfelt'} bredde="XXS" />

Kopiert!

Mini

Man kan også rendre en mindre 32px versjon ved å bruke mini-attributtet.

advarsel
Som hovedregel skal vi alltid bruke de store inputfeltene våre. For tilfeller med svært begrenset plass kan de mindre inputfeltene brukes unntaksvis ved klart behov.
<Input mini />

Kopiert!