@utrecht/form-css

Form

Formulier componenten gebruiken in jouw project

Als je aan de slag gaat om onze componenten te gebruiken voor jouw formulieren, dan heb je de volgende componenten nodig:

• Form field: een container element waar form input en alle bijbehorende teksten in zitten. De invalid variant maakt het makkelijk validatiefouten te vinden.
• Form fieldset: een container element waar meerdere form fields in zitten. Gebruik deze altijd voor radio button groups en voor checkbox groups.
• Form label: plaats in dit element de tekst die het label. Labels voor een checkbox en radio button hebben een speciale variant.
• Form field description:
  • extra instructies om het formulierveld in te vullen. "Form field description" is ook wel bekend als "helper text"
  • Foutmeldingen bij een formulierveld zet je in een invalid variant van de form field description.
  • Foutmeldingen bij een button, bijvoorbeeld als de server down is.
• Textbox en text area
• Checkbox
  • een enkele checkbox ("Ik ga akkoord met de algemen voorwaarden"), die plaats je in een form field
  • een groep met checkboxen plaats je in een form fieldset met daarin meerdere form fields
  • een lijst met enkele checkboxen ("Ik ga akkoord met de algemene voorwaarden" en "Ik schrijf me in voor de nieuwsbrief"), dan gebruik je meerdere form fields na elkaar (zonder fieldset)
• Radio button group: een form fieldset met daarin meerdere form fields met een radio button.
• Button:
  • Primary action button: gebruik deze voor bijvoorbeeld het formulier versturen, of om naar de volgende stap te gaan.
  • Secondary action button: gebruik deze voor acties die niet de voornaamste manier zijn om de huidige taak uit te voeren, zoals stoppen met het formulier.
  • Button that looks like a link: gebruik deze om de gegevens op te slaan en naar een andere stap te gaan.
  • Link that looks like a button: gebruik deze om naar het formulier te gaan. Een link mag geen side effect hebben, dus gebruik deze niet als er gegegevens opgestuurd worden.
• Button group: de container waarin één of meerdere buttons staan. Een button moet niet los in de pagina staan.
• Data list: voor een samenvatting van de ingevulde gegevens gebruik je de data list.
• Alert: gebruik deze container voor de waarschuwing dat op de pagina één of meerdere formuliervelden invalid zijn.