JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4173
  • Score
    100M100P100Q128350F
  • License EUPL-1.2

Form field component for the Municipality of Utrecht based on the NL Design System architecture

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@utrecht/form-field-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Form field

    Gebruik het form field component om een alle onderdelen van een formulierveld in te verzamelen: het label, de form control, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.

    De volgende componenten zijn vaak onderdeel van een form field:

    • form label component
    • form field description component met extra beschrijving
    • form field description component met een validatiemelding
    • een form control component zoals bijvoorbeeld:
      • textbox component
      • textarea component
      • checkbox component
      • radio button component
      • form select component
      • etcetera
    • form field description component met een foutmelding
    • form field description component status van component

    HTML

    Gebruik een element <div> element voor formuliervelden met één form control. Een formulierveld moet meerdere <p> elementen kunnen bevatten, gebruik daarom geen <p> element voor de form field. Je moet geen landmark role gebruiken voor een formulierveld (dus geen <section>) element.

    Voor formuliervelden met meerdere form controls mag je een <fieldset> element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een <div> om de fieldset heen te hebben: <div><fieldset>...</fieldset></div>.

    Gebruikte termen

    • form komt van <form> in HTML en role="form" in WAI-ARIA.
    • field komt van <fieldset> in HTML.
    • invalid komt van aria-invalid in WAI-ARIA.
    • radio komt van <input type="radio"> in HTML.
    • checkbox komt van <input type="checkbox"> in HTML.
    • label komt van <label> in HTML en aria-labelledby in WAI-ARIA.
    • description komt van aria-describedby in WAI-ARIA.

    Relevante WCAG regels

    • WCAG eis 2.4.6: de tekst van het label moet duidelijk zijn
    • WCAG eis 3.3.9: gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
      • Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
      • Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.