Input

Input er et element for datahenting i et skjema.

Eksempler

Enkel input

Du kan lage en input uten alle props.

<Input
  label="Adresse"
/>

Input med feedback

Du kan lage en input med hint eller feilmelding. Meldingen styres med feedback, mens styling styres med status.

<form>
  <Stack gap="md">
    <Input
      feedback="Bruk minst 8 tegn."
      label="Adresse"
    />
    <Input
      feedback="Feil: Bruk minst 8 tegn."
      label="Adresse"
      status="error"
    />
  </Stack>
</form>

Input i ulike størrelser

Med size kan du velge ulike størrelser: small, medium og large. Dette er tilsvarende for Button-komponenten.

<form>
  <Stack gap="md">
    <Input
      feedback="Bruk minst 8 tegn."
      label="Adresse"
      size="small"
    />
    <Input
      feedback="Bruk minst 8 tegn."
      label="Adresse"
      size="medium"
    />
    <Input
      feedback="Bruk minst 8 tegn."
      label="Adresse"
      size="large"
    />
  </Stack>
</form>

Input med ikoner

Du kan velge å bruke ikoner med props leftIcon og rightIcon.

<form>
  <Stack gap="md">
    <Input
      label="Adresse"
      leftIcon={<EnergyIcon />}
      sizeVariant="medium"
    />
    <Input
      label="Adresse"
      rightIcon={<EnergyIcon />}
      sizeVariant="medium"
    />
    <Input
      label="Adresse"
      leftIcon={<EnergyIcon />}
      rightIcon={<EnergyIcon />}
      sizeVariant="medium"
    />
  </Stack>
</form>

Small bruker ikoner på 1rem, mens medium og large bruker ikoner på 1.5rem.

<form>
  <Stack gap="md">
    <Input
      label="Adresse"
      leftIcon={<EnergyIcon />}
      size="small"
    />
    <Input
      label="Adresse"
      leftIcon={<EnergyIcon />}
      size="medium"
    />
    <Input
      label="Adresse"
      leftIcon={<EnergyIcon />}
      size="large"
    />
  </Stack>
</form>

Retningslinjer

For universell utforming må label og input kobles programmatisk sammen. Det fins en rekke måter å gjøre dette på, men den enkleste og best støttede måten er ved å wrappe label rundt inputfeltet. Derfor er også dette gjort for Input-komponenten, og label er tilgjengelig som en prop.

Det er ikke alltid label lar seg wrappe rundt inputet av ulike årsaker, for eksempel for å støtte en viss styling. Da kan en bruke aria-describedby. Denne måten å håndtere kobling mellom inputfelt og label er ikke støttet i Input-komponenten. Om dette viser seg å bli et større behov, vil vi se nærmere på hvordan dette kan utvikles.

Input-elementer brukes gjerne i skjema. Ta en titt på UU-tilsynet for å lese om tilgjengelige skjemaer.

Kode

<Input />

import { Input } from "@aneo-org/design-react/serverComponents";

Element for å hente data fra bruker.

Prop	Type	Beskrivelse
feedback	`string?`	Hint eller feilmelding. Meldingen skal ikke være generisk, men være til hjelp.
size	`"small" \| "medium" \| "large"`	Endrer på størrelsen, tilsvarende Button-komponenten.
status	`"error" \| "info"`	"info" er standardverdi. "error" legger til styling på feedback og border for å varsle feil.
label	`string`	Label for inputfeltet.
hideLabel?	`boolean`	Bruk for å skjule label. Label vil fortsatt være mulig å lese for skjermlesere.