Richtlijnen NL Design System voor buttons in een formulier

Via een button verzend je een formulier of voer je aan andere actie uit, zoals het uploaden van een bestand. In deze documentatie gebruiken we de Engelse benaming voor het Nederlandse woord knop: ‘button’. Omdat <button> het HTML-element is waar deze richtlijnen over gaan.

Binnen een formulier bestaan er drie soorten buttons:

<button type="submit">, om het formulier mee te verzenden (dit is de default waarde binnen een formulier);
<button type="button">, dit zijn buttons die een andere functie hebben binnen een formulier, zoals het uploaden van documenten of openen van een modal;
<button type="reset">, om alle ingevulde informatie binnen een formulier te wissen.

De hier beschreven richtlijnen gelden voor al deze buttons.

Voor de toegankelijkheid en goede code van het formulier zijn de volgende punten belangrijk voor een button:

Overzicht richtlijnen

OVERVIEW PAGE NOT IMPLEMENTED

Deze documentatie heeft nu een eigen pagina

Toetsenbordbediening van een button.

Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld.

Plaatsing van een button binnen een formulier.

Duidelijk buttontekst die beschrijft wat de button doet.

De toegankelijke naam van een button.

Afbeeldingen als buttons.

Disabled submitbuttons.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.