Label

Unable to parse html

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 semibold font-weight som standard. Det gir eit balansert og tydeleg uttrykk i dei fleste skjema. Fontvekt skal alltid brukast med eit tydeleg føremål og bidra til eit meiningsfullt visuelt hierarki.

Når Label blir brukt i Radio eller Checkbox, blir fontvekta automatisk redusert. Det skaper eit naturleg hierarki mellom Label og ein eventuell ledetekst i det tilhøyrande Fieldset.

Unable to parse html

const Weights = () => {
  return (
    <div style={{ display: 'grid', gap: 'var(--ds-size-8)' }}>
      <Field>
        <Label>Label for text input</Label>
        <Input type='text' />
      </Field>
      <Field>
        <Label>Label for checkbox input</Label>
        <Input type='checkbox' />
      </Field>
    </div>
  );
};

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.

Unable to parse html

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.