Input

Ren CSS på et vanlig <input>, så nettleserens egen validering, autofyll og tastaturhåndtering virker som før.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/input.css"

Tilstander

Eksempel

Kode

<label class="fs-label" for="epost">E-postadresse</label>
<input class="fs-input" id="epost" type="email" placeholder="ola&#64;eksempel.no" />

<label class="fs-label" for="bekreft">Bekreft e-postadresse</label>
<input class="fs-input" id="bekreft" type="email" data-state="success" value="ola&#64;eksempel.no" />

<label class="fs-label" for="reserve">Reserve-e-post</label>
<input class="fs-input" id="reserve" type="email" data-state="invalid" aria-invalid="true" value="ola&#64;" />

<label class="fs-label" for="registrert">Registrert e-postadresse</label>
<input class="fs-input" id="registrert" type="email" value="ola&#64;eksempel.no" disabled />

data-state	Brukes til
(utelatt)	Normaltilstand
invalid	Valideringen har feilet
success	Verdien er bekreftet gyldig

data-state er farge. Skjermlesere trenger aria-invalid="true" i tillegg, eller Field, som setter begge.

Dato og klokkeslett

Eksempel

Kode

<label class="fs-label" for="dato">Reisedato</label>
<input class="fs-input" id="dato" data-variant="date" type="date" value="2026-05-31" />

<label class="fs-label" for="tid">Avreisetidspunkt</label>
<input class="fs-input" id="tid" data-variant="time" type="time" value="14:30" />

data-variant og type må være like

Ikonet styres av data-variant, velgeren av type. Setter du bare den ene, får du et felt som ser ut som et datofelt, men der ingenting skjer når brukeren trykker på ikonet.

fs.input({ type: "date" }) setter begge, og fjerner feilen helt.

Bare date, time og datetime-local påvirker utseendet. De øvrige typene finnes for at TypeScript-hjelperen skal kunne sette type for deg.

Hvilken datokomponent?

Situasjon	Komponent
Nettleserens egen datovelger holder	Input med type="date"
Du skal be om en dato	Dato i et skjema

TypeScript

import { fs, type FieldState } from "@fristil/designsystem"

const felt = document.querySelector<HTMLInputElement>("#epost")

fs.setAttributes(felt, fs.input({ type: "email" }))

type setter både HTML-typen og ikonvarianten, så de kan ikke komme i utakt. Fellen over er ikke mulig å gå i.

Ved validering kaller du den på nytt med ny tilstand:

felt.addEventListener("blur", () => {
  const tilstand: FieldState = felt.validity.valid ? "default" : "invalid"

  fs.setAttributes(felt, fs.input({ type: "email", state: tilstand }))
})

state: "invalid" setter både data-state for fargen og aria-invalid for skjermleseren. Går feltet tilbake til "default", fjerner fs.setAttributes begge. Uten det ville feltet blitt stående rødt etter at feilen var rettet.

Verdier utenfra: fs.input.isType(x) og fs.input.isState(x). Se Typesikker bruk.

Klasser du kan style

Klasse	Hva det er
.fs-input	Feltet. Tilstanden kommer fra data-state, ikonet fra data-variant.

Variabel	Standard
--fs-input-padding	var(--size-2) var(--size-3)
--fs-input-radius	var(--size-1)

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Hvert felt trenger en synlig <label> med for. placeholder er ingen erstatning, siden den forsvinner idet brukeren skriver.
• Bruk riktig type. Det bestemmer mobiltastaturet og hva nettleseren tilbyr av autofyll.
• Sett autocomplete på felt som spør om personopplysninger, for eksempel autocomplete="email".