Beta

Input

Input er et tekstfelt for brukerinput med underline-stil. Støtter innebygd label og feilmelding, samt alle standard HTML input-typer.

Utforsk

Navn

label

type

placeholder

error

disabled

<Input label="Navn" placeholder="Skriv noe..." type="text" />

Importering

import { Input } from "@kilden/designsystem";

Grunnleggende bruk

<Input placeholder="Skriv noe..." />

Med label

Bruk label-propen for å legge til en synlig label koblet til inputfeltet.

<Input label="Navn" placeholder="Ola Nordmann" />

Med feilmelding

Bruk error-propen for å vise en feilmelding under feltet. Dette setter også visuell error-state med rød bunnlinje og aria-invalid på inputen.

<Input label="E-post" type="email" error="E-post er obligatorisk" />

Med ikon

Bruk prefix og suffix-propene for å legge til ikoner eller knapper inne i feltet.

<Input label="E-post" prefix={<Mail size={20} />} placeholder="ola@bekk.no" />

<Input label="Beløp" suffix={<span className="text-neutral-text-subtle">NOK</span>} placeholder="0,00" />

Ulike typer

<div style={{ display: "grid", gap: "1.5rem", maxWidth: "24rem" }}>
<Input label="E-post" type="email" placeholder="ola@bekk.no" />
<Input label="Passord" type="password" placeholder="••••••••" />
<Input label="Antall" type="number" placeholder="0" />
<Input label="Søk" type="search" placeholder="Søk etter komponenter..." />
</div>

Deaktivert

<Input label="Navn" placeholder="Kan ikke redigeres" disabled />

Fil-input

<Input label="Last opp fil" type="file" />

Med knapp

<div style={{ display: "flex", gap: "0.5rem", maxWidth: "24rem", alignItems: "end" }}>
<Input label="Nyhetsbrev" placeholder="E-postadresse" type="email" />
<Button>Abonner</Button>
</div>

Bruksanbefalinger

E-post

Bruk alltid en label

Alle input-felt må ha en synlig label som forklarer hva feltet er til. Bruk label-propen for enkel kobling.

Ikke bruk placeholder som label

Placeholder forsvinner når brukeren begynner å skrive. Bruk label-propen i tillegg til placeholder.

E-post

Bruk riktig type

Sett type='email' for e-post, type='number' for tall osv. Dette gir riktig tastatur på mobil og validering i nettleseren.

Telefon

Ikke bruk text-type for alt

Å bruke type='text' for e-post, tall eller telefonnummer gir dårligere brukeropplevelse, spesielt på mobil.

Tilgjengelighet

label-propen kobler automatisk label til input via id/htmlFor
error-propen setter aria-invalid og kobler feilmelding via aria-describedby
Feilmelding har role="alert" for skjermlesere
Tydelig fokusindikator med tykkere bunnlinje
Disabled-tilstand kommuniseres via HTML disabled-attributtet

Props

Input arver alle props fra <input>, pluss disse:

Prop	Type	Default	Beskrivelse
`label`	`string`	—	Synlig label over inputfeltet
`error`	`string`	—	Feilmelding under feltet (aktiverer error-state)
`prefix`	`ReactNode`	—	Innhold til venstre for inputfeltet (f.eks. ikon)
`suffix`	`ReactNode`	—	Innhold til høyre for inputfeltet (f.eks. knapp)
`type`	`string`	`"text"`	Input-type (text, email, password, number osv.)
`placeholder`	`string`	—	Plassholdertekst
`disabled`	`boolean`	`false`	Deaktiver feltet
`required`	`boolean`	`false`	Marker som påkrevd
`name`	`string`	—	Navn for skjemainnsending
`value`	`string`	—	Kontrollert verdi
`onChange`	`(e: ChangeEvent) => void`	—	Kalles ved endring