@utrecht/components/form/README.md

Components for the Municipality of Utrecht based on the NL Design System architecture

<!-- @license CC0-1.0 -->

# 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.