Label

Kildekode på GitHub · Les som Markdown

Label er en tilgjengelig label-komponent som kobler tekst til skjemaelementer. Bygget på Radix UI Label med automatisk håndtering av klikk-fokus og riktig semantikk.

Importering

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

Grunnleggende bruk

<div style={{ display: "grid", gap: "0.5rem", maxWidth: "24rem" }}>
<Label htmlFor="name">Navn</Label>
<Input id="name" placeholder="Ola Nordmann" />
</div>

Med ulike skjemaelementer

<div style={{ display: "grid", gap: "1.5rem", maxWidth: "24rem" }}>
<div style={{ display: "grid", gap: "0.5rem" }}>
  <Label htmlFor="email">E-post</Label>
  <Input id="email" type="email" placeholder="ola@bekk.no" />
</div>
<div style={{ display: "grid", gap: "0.5rem" }}>
  <Label htmlFor="bio">Biografi</Label>
  <Textarea id="bio" placeholder="Fortell om deg selv..." />
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Switch id="notifications" />
  <Label htmlFor="notifications">Aktiver varsler</Label>
</div>
</div>

Bruksanbefalinger

E-post

Koble label til skjemaelementet

Bruk htmlFor og id for å koble label til input. Da kan brukeren klikke på labelen for å fokusere feltet.

E-post

Ikke bruk label uten kobling

En label uten htmlFor gir ingen tilgjengelighetsforbedring. Skjermlesere kan ikke koble teksten til feltet.

Tilgjengelighet

Klikk på labelen fokuserer det tilknyttede skjemaelementet
Skjermlesere leser opp labelen når feltet får fokus
Redusert opasitet og cursor-not-allowed når tilknyttet felt er disabled (via CSS peer)

Props

Prop	Type	Default	Beskrivelse
`htmlFor`	`string`	—	ID-en til skjemaelementet labelen tilhører