Label

Field label

Voorbeeld HTML

<label class="rvo-label">
  <div>Field label</div>
</label>

Open in nieuwe tab

Een label beschrijft het doel en de functionaliteit van het bijbehorende formulierveld.

Wanneer gebruik je een label

Je gebruikt een label elke keer als je een formulierveld toont.

Anatomie van het component

Een label bestaat uit:

• Labeltekst
• Indicator of het formulierveld verplicht is
• Indicator of het formulierveld niet verplicht is

Richtlijnen

• Standaard wordt het default formaat gebruikt
• Voor labels van checkboxes en radio buttons wordt het small formaat gebruikt
• Een label staat altijd boven het formulierveld
• Geef aan of formulierveld verplicht ingevuld moet worden
• Wanneer het merendeel van de velden verplicht is hoeft dit niet expliciet aangegeven te worden. Er kan dan voor gekozen worden om optionele te kenmerken als zodanig

Rijkshuisstijl

Dit component volgt de richtlijnen zoals deze zijn opgesteld door de Rijkshuisstijl.

Bronnen

• Simple is better - Making your web forms easy to use pays off
• Formuliervelden op de Rijkshuisstijl
• Website Forms Usability: Top 10 Recommendations

Algemene veldregels:

• Gebruik (niet verplicht) bij optionele formulier velden in plaats van * (verplicht) bij verplichte formulier velden
• Gebruik expandable tekst in plaats van een toggle knop
• Gebruik expandable tekst in plaats van een ‘?’ uitleg icoontje