Input

@/components/ui/Input

Standard tekstfelt (Input) og flerlinjefelt (Textarea) — samme API, samme utseende og feilhåndtering.

Når brukes den

Bruk Input for ett-linjes tekst/tall, Textarea for fritekst over flere linjer.
size: sm (32px) i tette rader/tabeller, md (40px, standard) i vanlige skjema, lg (48px) i store, luftige skjema (registrering, onboarding).
hint for én kort setning om HVA feltet skal inneholde når etiketten alene ikke er nok — ikke skriv forklaringen inn i selve etiketten (den leses høyt ved hvert fokus og brekker skjemagrid).
error viser en rød kant + feiltekst under (FormError), koblet med aria-describedby.
prefix/suffix for en fast enhet eller et ikon som hører til VERDIEN (kr, m², @, et søkeikon) — ikke for en klikkbar handling; det er `Select`/en egen knapp ved siden av feltet sin jobb.
Ikke bygg et rått input- eller textarea-element noe sted i appen — bruk disse (regel/ingen-raa-skjemaelementer).

Eksempler

Med etikett

Standardformen — etikett over feltet, koblet med htmlFor/id.

Navn på sameie

<Input id="navn" label="Navn på sameie" placeholder="Sameiet Solsiden" />

Størrelser

sm (32px, label-13) i tette rader, md (40px, label-14) er standard, lg (48px, label-16) for store skjema.

<Input size="sm" placeholder="…" />
<Input size="lg" placeholder="…" />

Med prefix/suffix

Tekst eller ikon foran/etter feltet, skilt med en 1px linje, i text-secondary — for en enhet eller et symbol som hører til verdien.

m²

<Input prefix="kr" placeholder="0" />
<Input suffix="m²" placeholder="120" />

Med hjelpetekst (hint)

Én kort setning om hva feltet skal inneholde, når etiketten alene ikke er nok.

Løpende kostnad (kr/mnd)

Abonnement eller serviceavtale som følger med tilbudet.

Med feilmelding

error legger på en rød kant og en feiltekst under (FormError), koblet til feltet for skjermleser.

E-post

Ugyldig e-postadresse.

Hint og feil sammen

Begge kobles til feltet via aria-describedby — hint leses før feil.

Løpende kostnad (kr/mnd)

Abonnement eller serviceavtale som følger med tilbudet.

Kan ikke være negativ.

Deaktivert

Dempet flate (gray-alpha-100) og text-quaternary — ingen hover, ikke fokuserbar.

Org.nr

Textarea

Samme API som Input (label/error/hint/size), for fritekst over flere linjer. Minstehøyde 96px uansett størrelse.

Notat

<Textarea id="notat" label="Notat" placeholder="Skriv en kort merknad…" rows={3} />

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

label

string

—

Synlig etikett over feltet, koblet med htmlFor/id.

error

string

—

Feiltekst under feltet (FormError). Legger på rød kant og aria-invalid.

hint

string

—

Kort hjelpetekst under feltet, koblet via aria-describedby.

size

'sm' | 'md' | 'lg'

'md'

32 / 40 / 48px. Textarea bruker samme skala for tekst/padding, men beholder 96px minstehøyde uansett.

prefix

ReactNode

—

Kun Input. Tekst eller ikon FØR feltet, med 1px skillelinje, i text-secondary.

suffix

ReactNode

—

Kun Input. Tekst eller ikon ETTER feltet, med 1px skillelinje, i text-secondary.

string

generert

Felt-id. Genereres automatisk med useId() når utelatt, så label/felt alltid er koblet.

…

InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>

—

Alle native felt-attributter (placeholder, defaultValue, disabled, rows for Textarea, m.fl.) videreføres.

Regler

regel/ingen-raa-skjemaelementer

Beslektede komponenter