Alpha

PasswordInput

PasswordInput er et passordfelt med innebygd vis/skjul-knapp. Stylet med underline-stil. Støtter innebygd label og feilmelding, samt alle standard HTML input-attributter.

Utforsk

Passord

label

placeholder

error

disabled

<PasswordInput label="Passord" placeholder="Skriv inn passord..." />

Importering

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

Grunnleggende bruk

<PasswordInput label="Passord" />

Med autoComplete

Bruk autoComplete-propen for å angi om feltet er for et eksisterende passord (current-password, default) eller et nytt passord (new-password).

<PasswordInput label="Nytt passord" autoComplete="new-password" />

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.

<PasswordInput label="Passord" error="Passord er påkrevd" />

Deaktivert

<PasswordInput label="Passord" placeholder="Kan ikke skrive" disabled />

Bruksanbefalinger

Passord

Bruk alltid en label

Alle passordfelt må ha en synlig label som forklarer hva feltet er til.

Ikke bruk placeholder som label

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

Nytt passord

Sett riktig autoComplete

Bruk current-password for innlogging og new-password for registrering eller passordbytte. Dette hjelper passordadministratorer.

Passord

Ikke bruk vanlig Input for passord

Bruk PasswordInput for passordfelt. Den gir vis/skjul-knapp og riktig autoComplete ut av boksen.

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
Vis/skjul-knappen har aria-label som oppdateres ("Vis passord" / "Skjul passord")
Vis/skjul-knappen har type="button" for å unngå utilsiktet form-submit
Tydelig fokusindikator med tykkere bunnlinje
Disabled-tilstand kommuniseres via HTML disabled-attributtet

Props

PasswordInput arver alle props fra <input> (unntatt type og suffix), pluss disse:

Prop	Type	Default	Beskrivelse
`label`	`string`	—	Synlig label over passordfeltet
`error`	`string`	—	Feilmelding under feltet (aktiverer error-state)
`autoComplete`	`"new-password" \| "current-password"`	`"current-password"`	autoComplete-attributt for passordfeltet
`placeholder`	`string`	—	Plassholdertekst
`disabled`	`boolean`	`false`	Deaktiver feltet
`value`	`string`	—	Kontrollert verdi
`onChange`	`(e: ChangeEvent) => void`	—	Kalles ved endring