Input

Normal

I sin enkleste form er Input bare et enkelt tekstinputfelt.

<Input label="Inputfelt-label" />
 Kopiert! 

Med label

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:

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

<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]*"

<Input label="Inputfelt-nummer" inputMode="numeric" pattern="[0-9]*" />
 Kopiert! 

Kombinasjon med Hjelpetekst

<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

<Input label="Inputfelt-label" disabled />
 Kopiert! 

Innhold mellom label og skjemafelt

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

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

Feilmarkering

Normal

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

Forenklet

<Input label="Inputfelt-label" 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.

<Input mini />
 Kopiert!