Label

const Preview = () => {
  return <Label>Fødselsnummer (11 sifre)</Label>;
};

render(<Preview />)

Label er ein typografi-komponent som skal brukast for å beskrive innhald i skjemafelt som brukaren skal fylle ut eller samhandle med. Bruk den for å gje kort, presis og forståeleg informasjon om kva eit felt inneheld, eller kva brukaren skal gjere.

Eksempel

Vekter

Label har som standard medium font-weight, som gjev eit balansert og tydeleg uttrykk i dei fleste skjema. Bruk ulike vekter berre når det trengst for å skape eit klarare hierarki. Unngå å endre font-weight berre for pynt - forskjellen i vekt skal alltid ha ei tydeleg og meiningsfull rolle for brukaren.

const Weights = () => {
  return (
    <>
      <Label weight='regular'>Regular weight</Label>
      <Label weight='medium'>Medium weight</Label>
      <Label weight='semibold'>Semibold weight</Label>
    </>
  );
};

render(<Weights />)

Retningslinjer

Label skal vere tydeleg kopla til det tilhøyrande feltet, slik at både visuelle brukarar og brukarar av hjelpemiddel forstår samanhengen.

Dersom feltet krev spesifikke format eller avgrensingar, kan dette supplerast med beskrivelse (description) under i staden for å gjere Label unødvendig lang.

const TextFieldLabel = () => {
  return (
    <Textfield label='Gateadresse' description='Eksempel: Solsikkeveien 44' />
  );
};

render(<TextFieldLabel />)

Tekst

Tekst i Label skal vere enkel, konsekvent og lett å forstå. Skriv i klartekst slik at alle brukarar umiddelbart veit kva dei skal fylle inn eller velje. Unngå forkortingar og intern terminologi med mindre målgruppa er godt kjent med desse.