@utrecht/form-label-css

Form label

Design

Het label moet aanklikbaar zijn om de form input te activeren. Gebruik display: inline voor het label, zodat de tekst aanklikbaar is. Je wilt dat de witruimte naast de tekst niet aanklikbaar is, omdat niet duidelijk is welke actie hoort bij de witruimte.

Als je het label wilt gebruiken als onderdeel van display: grid of display: flex, gebruik dan een extra <div> wrapper element om het label heen, om te voorkomen dat de label heel groot wordt.

Terminologie

• label: net als <label> in HTML

Class names

• utrecht-form-label

Design tokens

• Form label
  • utrecht-form-label-font-weight
  • utrecht-form-label-font-size

Relevante WCAG regels

• WCAG eis 2.4.6: de tekst van het label moet duidelijk zijn