Input

Kildekode på GitHub · Les som Markdown

Input er et grunnleggende tekstfelt for brukerinput. Stylet med semantiske fargetokens og tydelig fokusindikator. Støtter alle standard HTML input-typer.

Utforsk

type

placeholder

disabled

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

Importering

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

Grunnleggende bruk

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

Med label

Koble alltid input til en label via id/htmlFor.

<div style={{ display: "grid", gap: "0.5rem", maxWidth: "24rem" }}>
<label htmlFor="name" style={{ fontSize: "0.875rem", fontWeight: 500 }}>Navn</label>
<Input id="name" placeholder="Ola Nordmann" />
</div>

Ulike typer

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

Deaktivert

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

Fil-input

<div style={{ display: "grid", gap: "0.25rem", maxWidth: "24rem" }}>
<label htmlFor="file-ex" style={{ fontSize: "0.875rem", fontWeight: 500 }}>Last opp fil</label>
<Input id="file-ex" type="file" />
</div>

Med knapp

<div style={{ display: "flex", gap: "0.5rem", maxWidth: "24rem" }}>
<Input 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. Dette er viktig for tilgjengelighet.

Ikke bruk placeholder som label

Placeholder forsvinner når brukeren begynner å skrive. Bruk en synlig label 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

Koble alltid til en <label> med id/htmlFor
Bruk aria-describedby for hjelpetekst eller feilmeldinger
Tydelig fokusindikator med focus-visible:ring-2
Disabled-tilstand kommuniseres via HTML disabled-attributtet

Props

Input arver alle props fra <input>. De mest relevante:

Prop	Type	Default	Beskrivelse
`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