Input

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

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/input/input.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/label/label.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<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 />

TypeScript

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

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<input {...fs.input({ type: "email", state: "invalid" })} id="epost" />

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

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

const felt = document.querySelector<HTMLInputElement>("#epost")
if (!felt) throw new Error("fant ikke feltet")

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

type setter både HTML-typen og ikonvarianten, så de kan ikke komme i utakt. Med fs.input() er den fella ikke mulig å gå i: en verdi som ikke finnes, er en typefeil.

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.

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

Ren HTML

<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 data-variant, får du et felt som ser ut som et datofelt, men der ingenting skjer når brukeren trykker på ikonet. Setter du bare type, står nettleserens egen knapp igjen, og den virker.

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

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(--fs-spacing-2) var(--fs-spacing-3)
--fs-input-radius	var(--fs-spacing-1)

Et eksempel. Et skjema som skal fylles ut på mobil tåler større treffflater, og huset ditt vil kanskje ha rette hjørner:

Eksempel

Ren HTML

<label class="fs-label" for="standard">Fødselsnummer</label>
<input class="fs-input" id="standard" type="text" />

<div class="romslig-skjema">
<label class="fs-label" for="romslig">Fødselsnummer</label>
<input class="fs-input" id="romslig" type="text" />
</div>

.romslig-skjema {
--fs-input-padding: var(--fs-spacing-3) var(--fs-spacing-4);
--fs-input-radius: 0;
}

Variabelen står på beholderen, ikke på feltet, så den gjelder hvert felt i skjemaet uten at du rører noen av dem.

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".