FormField

Kildekode på GitHub · Les som Markdown

FormField, FormDescription og FormMessage er hjelpere for å bygge konsistente skjemafelt. De gir riktig layout og mellomrom mellom label, skjemaelement, hjelpetekst og feilmelding.

Importering

import { FormField, FormDescription, FormMessage } from "@kilden/designsystem";

Grunnleggende bruk

<FormField style={{ maxWidth: "24rem" }}>
<Label htmlFor="name">Navn</Label>
<Input id="name" placeholder="Ola Nordmann" />
</FormField>

Med hjelpetekst

<FormField style={{ maxWidth: "24rem" }}>
<Label htmlFor="email">E-post</Label>
<Input id="email" type="email" placeholder="ola@bekk.no" />
<FormDescription>Vi deler aldri e-posten din med andre.</FormDescription>
</FormField>

Med feilmelding

Bruk FormMessage sammen med aria-invalid og aria-describedby på skjemaelementet for tilgjengelighet.

<FormField style={{ maxWidth: "24rem" }}>
<Label htmlFor="password">Passord</Label>
<Input
  id="password"
  type="password"
  aria-invalid="true"
  aria-describedby="password-error"
/>
<FormMessage id="password-error">Passordet må være minst 8 tegn.</FormMessage>
</FormField>

Komplett eksempel

<form style={{ display: "grid", gap: "1.5rem", maxWidth: "24rem" }}>
<FormField>
  <Label htmlFor="full-name">Fullt navn</Label>
  <Input id="full-name" placeholder="Ola Nordmann" />
</FormField>

<FormField>
<Label htmlFor="work-email">E-post</Label>
<Input id="work-email" type="email" placeholder="ola@bekk.no" />
<FormDescription>Bruk jobb-e-posten din.</FormDescription>
</FormField>

<FormField>
<Label htmlFor="bio-text">Bio</Label>
<Textarea id="bio-text" placeholder="Fortell om deg selv..." rows={3} />
<FormDescription>Maks 160 tegn.</FormDescription>
</FormField>

<FormField>
<Label htmlFor="role-select">Rolle</Label>
<Select>
  <SelectTrigger id="role-select">
    <SelectValue placeholder="Velg rolle" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="dev">Utvikler</SelectItem>
    <SelectItem value="designer">Designer</SelectItem>
    <SelectItem value="pm">Prosjektleder</SelectItem>
  </SelectContent>
</Select>
</FormField>

<FormField>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="agree-terms" />
  <Label htmlFor="agree-terms">Jeg godtar vilkårene</Label>
</div>
</FormField>

<Button type="submit">Send inn</Button>
</form>

Med validering

<form style={{ display: "grid", gap: "1.5rem", maxWidth: "24rem" }}>
<FormField>
  <Label htmlFor="val-name">Navn</Label>
  <Input
    id="val-name"
    aria-invalid="true"
    aria-describedby="val-name-error"
  />
  <FormMessage id="val-name-error">Navn er påkrevd.</FormMessage>
</FormField>

<FormField>
<Label htmlFor="val-email">E-post</Label>
<Input
  id="val-email"
  type="email"
  defaultValue="ugyldig-epost"
  aria-invalid="true"
  aria-describedby="val-email-error"
/>
<FormMessage id="val-email-error">Ugyldig e-postadresse.</FormMessage>
</FormField>

<FormField>
<Label htmlFor="val-bio">Bio</Label>
<Textarea id="val-bio" placeholder="Skriv noe..." />
<FormDescription>Valgfritt felt — ingen feil her.</FormDescription>
</FormField>

<Button type="submit">Send inn</Button>
</form>