Stabil

FormField

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

FormField kobler i tillegg automatisk sammen Label, skjemaelementet (Input, Textarea, SelectTrigger, Combobox, DateInput, TimePicker, DatePicker), FormDescription og FormMessage med id/htmlFor, aria-describedby og aria-invalid. Du trenger altså ikke sette id-er manuelt.

Importering

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

Grunnleggende bruk

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

Med hjelpetekst

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

Med feilmelding

Når en FormMessage med innhold vises, markeres skjemaelementet automatisk med aria-invalid="true" og kobles til feilmeldingen via aria-describedby.

<FormField style={{ maxWidth: "24rem" }}>
<Label>Passord</Label>
<Input
 
  type="password"
/>
<FormMessage>Passordet må være minst 8 tegn.</FormMessage>
</FormField>

Med påkrevd felt

Sett required på FormField. Labelen viser da en rød stjerne, og skjemaelementet får required for nativ nettleser-validering.

<FormField required style={{ maxWidth: "24rem" }}>
<Label>E-post</Label>
<Input type="email" placeholder="ola@bekk.no" />
</FormField>

Komplett eksempel

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

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

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

<FormField>
<Label>Rolle</Label>
<Select>
  <SelectTrigger>
    <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>Navn</Label>
  <Input />
  <FormMessage>Navn er påkrevd.</FormMessage>
</FormField>

<FormField>
<Label>E-post</Label>
<Input type="email" defaultValue="ugyldig-epost" />
<FormMessage>Ugyldig e-postadresse.</FormMessage>
</FormField>

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

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

Egne skjemaelementer

Bruk useFormControl for å koble et eget skjemaelement til FormField. Hooken slår sammen dine props med konteksten — eksplisitte props vinner alltid.

function MyControl(props: React.ComponentProps<"input">) {
  const controlProps = useFormControl(props);
  return <input {...props} {...controlProps} />;
}

Bruksanbefalinger

E-post

Jobb-e-post.

Bruk FormField for konsistent layout

FormField gir automatisk riktig mellomrom mellom label, felt, hjelpetekst og feilmelding.

E-post

Bruk jobb-e-post.

Ugyldig e-post.

Ikke bland hjelpetekst og feilmelding

Vis enten hjelpetekst eller feilmelding, ikke begge. Feilmeldingen erstatter hjelpeteksten.

Tilgjengelighet

FormField kobler automatisk label til skjemaelementet, og FormDescription/FormMessage via aria-describedby
Skjemaelementet får aria-invalid="true" når en FormMessage vises (eller når invalid er satt)
Eksplisitte props som id, aria-describedby og aria-invalid på skjemaelementet vinner over konteksten
FormMessage rendres med role="alert" slik at skjermlesere annonserer feil
FormMessage rendrer ingenting hvis children er tom — trygt å alltid inkludere

Props

FormField

Arver alle props fra <div>.

Prop	Type	Default	Beskrivelse
`controlId`	`string`	generert	Id for skjemaelementet i feltet
`required`	`boolean`	—	Markerer feltet som påkrevd (stjerne på label, `required` på skjemaelement)
`disabled`	`boolean`	—	Deaktiverer skjemaelementet
`invalid`	`boolean`	—	Markerer feltet som ugyldig. Settes automatisk når FormMessage vises

FormDescription

Arver alle props fra <p>. Rendres med dempet farge og liten tekst.

FormMessage

Arver alle props fra <p>. Rendres med role="alert" og en rød prikk foran teksten.

Prop	Type	Default	Beskrivelse
`children`	`ReactNode`	—	Feilmeldingstekst. Rendrer ingenting hvis tom

useFormControl

useFormControl(props) returnerer id, required, disabled, aria-describedby og aria-invalid slått sammen med konteksten fra nærmeste FormField.