NL Design System gerenderd met Astro
componenten
| title | title small | document title |
| Accordion | Accordion · NL Design System | |
| Action Group | Action Group · NL Design System | |
| Alert | Alert · NL Design System | |
| Alert Dialog | Alert Dialog · NL Design System | |
| Avatar | Avatar · NL Design System | |
| Blockquote | Blockquote · NL Design System | |
| Breadcrumb Navigation | Breadcrumb Navigation · NL Design System | |
| Button | Button · NL Design System | |
| Calendar | Calendar · NL Design System | |
| Card as Link | Card as Link · NL Design System | |
| Case Card | Case Card · NL Design System | |
| Checkbox | Checkbox · NL Design System | |
| Checkbox Group | Checkbox Group · NL Design System | |
| Code | Code · NL Design System | |
| Code Block | Code Block · NL Design System | |
| Color Sample | Color Sample · NL Design System | |
| Contact Timeline | Contact Timeline · NL Design System | |
| Data Badge | Data Badge · NL Design System | |
| Data Summary | Data Summary · NL Design System | |
| Date Input | Date Input · NL Design System | |
| Date Input Group | Date Input Group · NL Design System | |
| Date Picker | Date Picker · NL Design System | |
| Description List | Description List · NL Design System | |
| Dialog | Dialog · NL Design System | |
| Dot Badge | Dot Badge · NL Design System | |
| Drawer | Drawer · NL Design System | |
| Fieldset | Fieldset · NL Design System | |
| Figure | Figure · NL Design System | |
| File | File · NL Design System | |
| File Input | File Input · NL Design System | |
| Form Field | Form Field · NL Design System | |
| Form Field Description | Form Field Description · NL Design System | |
| Form Field Error Message | Form Field Error Message · NL Design System | |
| Form Field Label | Form Field Label · NL Design System | |
| Form Field Label Suffix | Form Field Label Suffix · NL Design System | |
| Form Field Status | Form Field Status · NL Design System | |
| Form Navigation | Form Navigation · NL Design System | |
| Form Summary | Form Summary · NL Design System | |
| Heading | Heading · NL Design System | |
| Heading 1 | Heading 1 · NL Design System | |
| Heading 2 | Heading 2 · NL Design System | |
| Heading 3 | Heading 3 · NL Design System | |
| Heading 4 | Heading 4 · NL Design System | |
| Heading 5 | Heading 5 · NL Design System | |
| Heading 6 | Heading 6 · NL Design System | |
| Heading Group | Heading Group · NL Design System | |
| Icon | Icon · NL Design System | |
| Image | Image · NL Design System | |
| Input Group | Input Group · NL Design System | |
| Language Navigation | Language Navigation · NL Design System | |
| Link | Link · NL Design System | |
| Link List | Link List · NL Design System | |
| Login Link | Login Link · NL Design System | |
| Logo | Logo · NL Design System | |
| Mark | Mark · NL Design System | |
| Modal Dialog | Modal Dialog · NL Design System | |
| Navigation Bar | Navigation Bar · NL Design System | |
| Note | Note · NL Design System | |
| Notification Banner | Notification Banner · NL Design System | |
| Number Badge | Number Badge · NL Design System | |
| Number Input | Number Input · NL Design System | |
| Ordered List | Ordered List · NL Design System | |
| Page Footer | Page Footer · NL Design System | |
| Page Header | Page Header · NL Design System | |
| Page Number Navigation | Page Number Navigation · NL Design System | |
| Paragraph | Paragraph · NL Design System | |
| Password Input | Password Input · NL Design System | |
| Progress Bar | Progress Bar · NL Design System | |
| Progress Circle | Progress Circle · NL Design System | |
| Progress List | Progress List · NL Design System | |
| Radio Button | Radio Button · NL Design System | |
| Radio Group | Radio Group · NL Design System | |
| Range | Range · NL Design System | |
| Rich Text Content | Rich Text Content · NL Design System | |
| Select | Select · NL Design System | |
| Select Combobox | Select Combobox · NL Design System | |
| Separator | Separator · NL Design System | |
| Side Navigation | Side Navigation · NL Design System | |
| Skip Link | Skip Link · NL Design System | |
| Spinner | Spinner · NL Design System | |
| Status Badge | Status Badge · NL Design System | |
| Strong | Strong · NL Design System | |
| Subscript | Subscript · NL Design System | |
| Superscript | Superscript · NL Design System | |
| Switch | Switch · NL Design System | |
| Table | Table · NL Design System | |
| Tabs | Tabs · NL Design System | |
| Task List | Task List · NL Design System | |
| Task Navigation | Task Navigation · NL Design System | |
| Text Area | Text Area · NL Design System | |
| Text Input | Text Input · NL Design System | |
| Toggletip | Toggletip · NL Design System | |
| Unordered List | Unordered List · NL Design System | |
| Video | Video · NL Design System | |
| YouTube Video | YouTube Video · NL Design System | |
| Componenten Overzicht | Componenten Overzicht · NL Design System |
baseline
| title | title small | document title |
| Baseline december 2024 | Baseline december 2024 · NL Design System | |
| Baseline april 2025 | Baseline april 2025 · NL Design System | |
| Baseline mei 2025 | Baseline mei 2025 · NL Design System | |
| Baseline juni 2025 | Baseline juni 2025 · NL Design System | |
| Baseline juli 2025 | Baseline juli 2025 · NL Design System | |
| Baseline augustus 2025 | Baseline augustus 2025 · NL Design System | |
| Baseline september 2025 | Baseline september 2025 · NL Design System | |
| Baseline oktober 2025 | Baseline oktober 2025 · NL Design System | |
| Baseline november 2025 | Baseline november 2025 · NL Design System | |
| Baseline december 2025 | Baseline december 2025 · NL Design System | |
| Baseline februari 2026 | Baseline februari 2026 · NL Design System | |
| Baseline maart 2026 | Baseline maart 2026 · NL Design System | |
| Baseline april 2026 | Baseline april 2026 · NL Design System | |
| Baseline | Baseline · NL Design System |
footer
| title | title small | document title |
| Code of Conduct | Code of Conduct · NL Design System | |
| Code of Conduct | Code of Conduct · NL Design System | |
| Colofon | Colofon · NL Design System | |
| Privacy policy | Privacy policy · NL Design System | |
| Privacyverklaring | Privacyverklaring · NL Design System | |
| Toegankelijkheid | Toegankelijkheid · NL Design System | |
| Audit toegankelijkheid NLDesignSystem.nl versie 1.0 | Audit toegankelijkheid NLDesignSystem.nl versie 1.0 · NL Design System | |
| Audit toegankelijkheid NLDesignSystem.nl versie 2.0 | Audit toegankelijkheid NLDesignSystem.nl versie 2.0 · NL Design System |
community
| title | title small | document title |
| Aanmelden als belangenorganisatie | Aanmelden als belangenorganisatie · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Community Sprints | Community Sprints · NL Design System | |
| MijnServices Community | MijnServices Community · NL Design System | |
| Meld je aan voor de MijnServices Community | Meld je aan voor de MijnServices Community · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Rijkshuisstijl Community | Rijkshuisstijl Community · NL Design System | |
| Meld je aan voor de Rijkshuisstijl Community | Meld je aan voor de Rijkshuisstijl Community · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Estafettemodeldag | Estafettemodeldag · NL Design System | |
| Introduction into European Design Systems 2025 | Introduction into European Design Systems 2025 · NL Design System | |
| Thanks for signing up! | Thanks for signing up! · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Communitybijeenkomst 18 oktober 2024 | Communitybijeenkomst 18 oktober 2024 · NL Design System | |
| Design Open Dag | Design Open Dag · NL Design System | |
| Design Open Hour | Design Open Hour · NL Design System | |
| Aanmelden | Aanmelden · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Design Systems Week | Design Systems Week · NL Design System | |
| Design Systems Week 2022 | Design Systems Week 2022 · NL Design System | |
| Videos | Videos · NL Design System | |
| Video's van Design Systems Week 2023 | Video's van Design Systems Week 2023 · NL Design System | |
| Videos | Videos · NL Design System | |
| Video's van Design Systems Week 2024 | Video's van Design Systems Week 2024 · NL Design System | |
| Videos | Videos · NL Design System | |
| Video's van Design Systems Week 2025 | Video's van Design Systems Week 2025 · NL Design System | |
| Tijdschema | Tijdschema · NL Design System | |
| Aanmelden voor Design Systems Week | Aanmelden voor Design Systems Week · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Design Systems Week | Design Systems Week · NL Design System | |
| Propose talk for Design Systems Week | Propose talk for Design Systems Week · NL Design System | |
| Thanks for proposing a session | Thanks for proposing a session · NL Design System | |
| Sign up for Design Systems Week | Sign up for Design Systems Week · NL Design System | |
| Thanks for signing up! | Thanks for signing up! · NL Design System | |
| Sprekers gezocht voor Design Systems Week | Sprekers gezocht voor Design Systems Week · NL Design System | |
| Sessie voorstellen | Sessie voorstellen · NL Design System | |
| Developer Open Hour | Developer Open Hour · NL Design System | |
| Aanmelden voor de Developer Open Hour | Aanmelden voor de Developer Open Hour · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Heartbeat van NL Design System | Heartbeat van NL Design System · NL Design System | |
| Aanmelden voor de Heartbeat | Aanmelden voor de Heartbeat · NL Design System | |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Video's van de Heartbeat | Video's van de Heartbeat · NL Design System | |
| Zelf iets vertellen | Zelf iets vertellen · NL Design System | |
| MijnServices Check-in | MijnServices Check-in · NL Design System | |
| Rijkshuisstijl Community Open Hour | Rijkshuisstijl Community Open Hour · NL Design System | |
| Expertteam Digitale Toegankelijkheid | Expertteam Digitale Toegankelijkheid · NL Design System | |
| Slack | Slack · NL Design System | |
| Design systems bij de overheid | Design systems bij de overheid · NL Design System | |
| Global design systems for governments | Global design systems for governments · NL Design System | |
| Sluit je aan bij onze community | Sluit je aan bij onze community · NL Design System | |
| Wie doet mee | Wie doet mee · NL Design System |
handboek
| title | title small | document title |
| Figma-bestanden overzicht | Figma-bestanden overzicht · NL Design System | |
| GitHub | GitHub · NL Design System | |
| Design tokens versiebeheer | Design tokens versiebeheer · NL Design System | |
| Figma changelog | Figma changelog · NL Design System | |
| Figma hygiëne | Figma hygiëne · NL Design System | |
| Figma migratie-stappenplan | Figma migratie-stappenplan · NL Design System | |
| Figma stappenplan | Figma stappenplan · NL Design System | |
| Figma structuur | Figma structuur · NL Design System | |
| Introductie | Introductie · NL Design System | |
| Werken met de Figma changelog | Werken met de Figma changelog · NL Design System | |
| Werken met NL Design System | Werken met NL Design System · NL Design System | |
| Zelf componenten maken | Zelf componenten maken · NL Design System | |
| Zelf componenten uitbreiden | Zelf componenten uitbreiden · NL Design System | |
| Zelf een thema maken | Zelf een thema maken · NL Design System | |
| Aan de slag met NL Design System | Aan de slag met NL Design System · NL Design System | |
| API conventie | API conventie · NL Design System | |
| Migreer van een CDN naar pnpm | Migreer van een CDN naar pnpm · NL Design System | |
| CDN gebruiken | CDN gebruiken · NL Design System | |
| Nieuwe versies uitbrengen met Changesets | Nieuwe versies uitbrengen met Changesets · NL Design System | |
| Conventies | Conventies · NL Design System | |
| CSS conventie | CSS conventie · NL Design System | |
| Deprecation | Deprecation · NL Design System | |
| Design Token conventie | Design Token conventie · NL Design System | |
| Design tokens | Design tokens · NL Design System | |
| GitHub Actions | GitHub Actions · NL Design System | |
| Infrastructuur | Infrastructuur · NL Design System | |
| Introductie | Introductie · NL Design System | |
| Werken met Node.js | Werken met Node.js · NL Design System | |
| Werken met pnpm | Werken met pnpm · NL Design System | |
| Prototypes met NL Design System | Prototypes met NL Design System · NL Design System | |
| Prototypes zonder front-end framework | Prototypes zonder front-end framework · NL Design System | |
| Semantic Versioning | Semantic Versioning · NL Design System | |
| Namen van states | Namen van states · NL Design System | |
| Design tokens vastleggen | Design tokens vastleggen · NL Design System | |
| Overzicht | Overzicht · NL Design System | |
| 3. Ontwikkelfase | 3. Ontwikkelfase · NL Design System | |
| 5. Publicatiefase | 5. Publicatiefase · NL Design System | |
| 1. Selectiefase | 1. Selectiefase · NL Design System | |
| 4. Testfase | 4. Testfase · NL Design System | |
| 2. Voorbereidings | 2. Voorbereidings · NL Design System | |
| Community stappenplan | Community stappenplan · NL Design System | |
| Community stappenplan voor het kernteam | Community stappenplan voor het kernteam · NL Design System | |
| Community stappenplan voor organisaties | Community stappenplan voor organisaties · NL Design System | |
| Definition of Done voor componenten | Definition of Done voor componenten · NL Design System | |
| Overzicht | Overzicht · NL Design System | |
| 1. Feedbackfase | 1. Feedbackfase · NL Design System | |
| 4. Ontwikkelfase | 4. Ontwikkelfase · NL Design System | |
| 6. Publicatiefase | 6. Publicatiefase · NL Design System | |
| 2. Selectiefase | 2. Selectiefase · NL Design System | |
| 5. Testfase | 5. Testfase · NL Design System | |
| 3. Voorbereidingsfase | 3. Voorbereidingsfase · NL Design System | |
| Help Wanted stappenplan | Help Wanted stappenplan · NL Design System | |
| Design tokens | Design tokens · NL Design System | |
| Thema's | Thema's · NL Design System | |
| Start-thema | Start-thema · NL Design System | |
| Voorbeeld-thema | Voorbeeld-thema · NL Design System | |
| Linting en code formatting | Linting en code formatting · NL Design System | |
| Security audit voor npm | Security audit voor npm · NL Design System | |
| Vercel | Vercel · NL Design System | |
| Componenten vinden | Componenten vinden · NL Design System | |
| Aanpak voor versionering | Aanpak voor versionering · NL Design System | |
| Estafettemodel | Estafettemodel · NL Design System | |
| Introductie | Introductie · NL Design System | |
| Voor leveranciers | Voor leveranciers · NL Design System | |
| Voor managers | Voor managers · NL Design System | |
| Naamgeving | Naamgeving · NL Design System | |
| Meedoen als organisatie | Meedoen als organisatie · NL Design System | |
| Tips voor NL Design System in aanbestedingen | Tips voor NL Design System in aanbestedingen · NL Design System |
project
| title | title small | document title |
| Bedankt voor je aanmelding | Bedankt voor je aanmelding · NL Design System | |
| Project | Project · NL Design System | |
| Op de hoogte blijven | Op de hoogte blijven · NL Design System | |
| Veelgestelde vragen | Veelgestelde vragen · NL Design System | |
| Kernteam | Kernteam · NL Design System | |
| Klachten | Klachten · NL Design System | |
| Over NL Design System | Over NL Design System · NL Design System | |
| Beslissingen voor schrijfwijze | Beslissingen voor schrijfwijze · NL Design System | |
| Doelen | Doelen · NL Design System | |
| Doelgroepen | Doelgroepen · NL Design System | |
| Engels | Engels · NL Design System | |
| Schrijfwijzer | Schrijfwijzer · NL Design System | |
| Nederlands | Nederlands · NL Design System | |
| Opbouw van een pagina | Opbouw van een pagina · NL Design System | |
| Reviews | Reviews · NL Design System |
richtlijnen
| title | title small | document title |
| Introductie | Introductie · NL Design System | |
| Introductie richtlijnen voor content | Introductie richtlijnen voor content · NL Design System | |
| Introductie richtlijnen voor afbeeldingen | Introductie richtlijnen voor afbeeldingen · NL Design System | |
| Algemene richtlijnen | Algemene richtlijnen · NL Design System | |
| Waar moet een alternatieve tekst staan? | Waar moet een alternatieve tekst staan? · NL Design System | |
| Decoratieve afbeeldingen | Decoratieve afbeeldingen · NL Design System | |
| Functionele afbeeldingen | Functionele afbeeldingen · NL Design System | |
| Grafieken | Grafieken · NL Design System | |
| Informatieve afbeeldingen | Informatieve afbeeldingen · NL Design System | |
| Tekst in een afbeelding | Tekst in een afbeelding · NL Design System | |
| Citaten | Citaten · NL Design System | |
| Kantoorbestanden | Kantoorbestanden · NL Design System | |
| Introductie richtlijnen voor tekstopmaak | Introductie richtlijnen voor tekstopmaak · NL Design System | |
| Kleurgebruik in tekst | Kleurgebruik in tekst · NL Design System | |
| Koppen | Koppen · NL Design System | |
| Toegankelijke linkteksten | Toegankelijke linkteksten · NL Design System | |
| Opsommingen | Opsommingen · NL Design System | |
| Taal instellen | Taal instellen · NL Design System | |
| Tabellen | Tabellen · NL Design System | |
| Tekst benadrukken | Tekst benadrukken · NL Design System | |
| Introductie richtlijnen voor video | Introductie richtlijnen voor video · NL Design System | |
| Audiodescriptie | Audiodescriptie · NL Design System | |
| Beschrijving voor video | Beschrijving voor video · NL Design System | |
| Flitsen in video | Flitsen in video · NL Design System | |
| Gebarentaal | Gebarentaal · NL Design System | |
| Ondertiteling | Ondertiteling · NL Design System | |
| Transcript | Transcript · NL Design System | |
| Introductie richtlijnen voor formulieren | Introductie richtlijnen voor formulieren · NL Design System | |
| Bevestigingspagina van een formulier | Bevestigingspagina van een formulier · NL Design System | |
| Zorg dat de gebruiker contact op kan nemen bij vragen | Zorg dat de gebruiker contact op kan nemen bij vragen · NL Design System | |
| Vermeld dat het formulier succesvol is verzonden | Vermeld dat het formulier succesvol is verzonden · NL Design System | |
| Maak de succesmelding toegankelijk voor alle gebruikers | Maak de succesmelding toegankelijk voor alle gebruikers · NL Design System | |
| Vertel wat de vervolgacties zijn | Vertel wat de vervolgacties zijn · NL Design System | |
| Buttons in een formulier | Buttons in een formulier · NL Design System | |
| Afbeeldingen als buttons | Afbeeldingen als buttons · NL Design System | |
| Disabled submitbuttons | Disabled submitbuttons · NL Design System | |
| Duidelijk buttontekst die beschrijft wat de button doet | Duidelijk buttontekst die beschrijft wat de button doet · NL Design System | |
| Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld | Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld · NL Design System | |
| Plaatsing van een button binnen een formulier | Plaatsing van een button binnen een formulier · NL Design System | |
| De toegankelijke naam van een button | De toegankelijke naam van een button · NL Design System | |
| Toetsenbordbediening van een button | Toetsenbordbediening van een button · NL Design System | |
| Descriptions in een formulier | Descriptions in een formulier · NL Design System | |
| Houd het aanklikbare gedeelte groot genoeg | Houd het aanklikbare gedeelte groot genoeg · NL Design System | |
| Gebruik alleen tekst in descriptions | Gebruik alleen tekst in descriptions · NL Design System | |
| Koppel een description aan het formulierveld | Koppel een description aan het formulierveld · NL Design System | |
| Houd de description kort en to-the-point | Houd de description kort en to-the-point · NL Design System | |
| Meerdere descriptions koppelen | Meerdere descriptions koppelen · NL Design System | |
| Plaats descriptions tussen label en formulierveld | Plaats descriptions tussen label en formulierveld · NL Design System | |
| Plaats descriptions bij een fieldset tussen legend en eerste item | Plaats descriptions bij een fieldset tussen legend en eerste item · NL Design System | |
| Fieldsets in een formulier | Fieldsets in een formulier · NL Design System | |
| Descriptions in een fieldset | Descriptions in een fieldset · NL Design System | |
| Legends | Legends · NL Design System | |
| Foutmeldingen in een formulier | Foutmeldingen in een formulier · NL Design System | |
| Schrijf een foutmelding uit in tekst | Schrijf een foutmelding uit in tekst · NL Design System | |
| Controleer op het juiste moment op fouten | Controleer op het juiste moment op fouten · NL Design System | |
| Schrijf een duidelijke foutmelding | Schrijf een duidelijke foutmelding · NL Design System | |
| Gebruik geen HTML-formuliervalidatie | Gebruik geen HTML-formuliervalidatie · NL Design System | |
| Zet de foutmeldingen bij de betreffende formuliervelden | Zet de foutmeldingen bij de betreffende formuliervelden · NL Design System | |
| Zet een samenvatting van de foutmeldingen boven het formulier | Zet een samenvatting van de foutmeldingen boven het formulier · NL Design System | |
| Geef feedback aan screenreadergebruikers | Geef feedback aan screenreadergebruikers · NL Design System | |
| Labels in een formulier | Labels in een formulier · NL Design System | |
| Zet alleen tekst in het label | Zet alleen tekst in het label · NL Design System | |
| Zorg ervoor dat het label altijd zichtbaar is | Zorg ervoor dat het label altijd zichtbaar is · NL Design System | |
| Gebruik duidelijke labelteksten | Gebruik duidelijke labelteksten · NL Design System | |
| Zet het label boven het formulierveld | Zet het label boven het formulierveld · NL Design System | |
| Geef een formulierveld een toegankelijke naam met een label | Geef een formulierveld een toegankelijke naam met een label · NL Design System | |
| De zichtbare naam moet overeenkomen met de toegankelijke naam | De zichtbare naam moet overeenkomen met de toegankelijke naam · NL Design System | |
| Links in een formulier | Links in een formulier · NL Design System | |
| Zet geen link in een label | Zet geen link in een label · NL Design System | |
| Geef aan als een link in een nieuwe tab opent | Geef aan als een link in een nieuwe tab opent · NL Design System | |
| Plaats de link boven het gerelateerde formulierveld | Plaats de link boven het gerelateerde formulierveld · NL Design System | |
| Meerdere stappen in een formulier | Meerdere stappen in een formulier · NL Design System | |
| Zorg voor een consistente navigatie en benaming van links en buttons | Zorg voor een consistente navigatie en benaming van links en buttons · NL Design System | |
| Plaats de informatie over waar de gebruiker is in de stappen boven het formulier | Plaats de informatie over waar de gebruiker is in de stappen boven het formulier · NL Design System | |
| Bied als laatste stap een opsomming aan van alle ingevoerde gegevens | Bied als laatste stap een opsomming aan van alle ingevoerde gegevens · NL Design System | |
| Geef duidelijk aan wanneer het formulier verzonden gaat worden | Geef duidelijk aan wanneer het formulier verzonden gaat worden · NL Design System | |
| Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt | Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt · NL Design System | |
| Placeholders in een formulier | Placeholders in een formulier · NL Design System | |
| Zorg voor een goed kleurcontrast van de placeholdertekst | Zorg voor een goed kleurcontrast van de placeholdertekst · NL Design System | |
| Een placeholder is geen vervanger van een label | Een placeholder is geen vervanger van een label · NL Design System | |
| Voorkom verwarring bij de gebruiker | Voorkom verwarring bij de gebruiker · NL Design System | |
| Placeholders en de zoekfunctie | Placeholders en de zoekfunctie · NL Design System | |
| Status in een formulier | Status in een formulier · NL Design System | |
| Geef gebruikers voldoende tijd | Geef gebruikers voldoende tijd · NL Design System | |
| Informeer gebruikers van screenreaders over het statusbericht | Informeer gebruikers van screenreaders over het statusbericht · NL Design System | |
| Informeer ingezoomde gebruikers | Informeer ingezoomde gebruikers · NL Design System | |
| Toetsenbordnavigatie in een formulier | Toetsenbordnavigatie in een formulier · NL Design System | |
| Gebruik geen positieve tabindex | Gebruik geen positieve tabindex · NL Design System | |
| Zorg dat het formulier werkt met een toetsenbord | Zorg dat het formulier werkt met een toetsenbord · NL Design System | |
| Visueel ontwerp van een formulier | Visueel ontwerp van een formulier · NL Design System | |
| Maak toetsenbordfocus goed zichtbaar | Maak toetsenbordfocus goed zichtbaar · NL Design System | |
| Geef fouten weer met meer dan alleen kleur | Geef fouten weer met meer dan alleen kleur · NL Design System | |
| Gebruik geen afbeelding voor buttons maar stijl tekst met CSS | Gebruik geen afbeelding voor buttons maar stijl tekst met CSS · NL Design System | |
| Maak aanklikbare formuliervelden groot genoeg | Maak aanklikbare formuliervelden groot genoeg · NL Design System | |
| Geef duidelijk aan waar een invoerveld is | Geef duidelijk aan waar een invoerveld is · NL Design System | |
| Zorg voor een logische volgorde van de informatie | Zorg voor een logische volgorde van de informatie · NL Design System | |
| Geef placeholders voldoende kleurcontrast | Geef placeholders voldoende kleurcontrast · NL Design System | |
| Geef tekst voldoende kleurcontrast | Geef tekst voldoende kleurcontrast · NL Design System | |
| Voorkom fouten in een formulier | Voorkom fouten in een formulier · NL Design System | |
| Autocomplete in een formulier | Autocomplete in een formulier · NL Design System | |
| Vul bekende informatie in waar mogelijk | Vul bekende informatie in waar mogelijk · NL Design System | |
| Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken | Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken · NL Design System | |
| Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken | Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken · NL Design System | |
| Geef geldige waardes aan voor een invoerveld | Geef geldige waardes aan voor een invoerveld · NL Design System | |
| Keur niet te snel af | Keur niet te snel af · NL Design System | |
| Vermeld duidelijk of een veld wel of niet verplicht is | Vermeld duidelijk of een veld wel of niet verplicht is · NL Design System | |
| Sta knippen en plakken van een wachtwoord toe | Sta knippen en plakken van een wachtwoord toe · NL Design System | |
| Uit te vragen informatie in een formulier | Uit te vragen informatie in een formulier · NL Design System | |
| Check of informatie ècht nodig is | Check of informatie ècht nodig is · NL Design System | |
| Geef invoervelden geen minimum/maximum tekstlengte | Geef invoervelden geen minimum/maximum tekstlengte · NL Design System | |
| Leg uit waarom informatie nodig is | Leg uit waarom informatie nodig is · NL Design System | |
| Biedt verschillende manieren om contact op te nemen | Biedt verschillende manieren om contact op te nemen · NL Design System | |
| Vraag niet meerdere keren dezelfde informatie uit | Vraag niet meerdere keren dezelfde informatie uit · NL Design System | |
| Wanneer gebruik je welk formulierelement? | Wanneer gebruik je welk formulierelement? · NL Design System | |
| Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief | Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief · NL Design System | |
| Kies voor het meest gebruiksvriendelijke formulierelement | Kies voor het meest gebruiksvriendelijke formulierelement · NL Design System | |
| Introductie richtlijnen voor stijl | Introductie richtlijnen voor stijl · NL Design System | |
| Introductie richtlijnen voor iconen | Introductie richtlijnen voor iconen · NL Design System | |
| Maak functionele iconen simpel van vorm | Maak functionele iconen simpel van vorm · NL Design System | |
| Gebruik SVG voor iconen en geen font | Gebruik SVG voor iconen en geen font · NL Design System | |
| Stem de grootte van je iconen af op je lettergrootte | Stem de grootte van je iconen af op je lettergrootte · NL Design System | |
| Zorg ook bij iconen voor voldoende contrast | Zorg ook bij iconen voor voldoende contrast · NL Design System | |
| Laat de lijndikte meeschalen | Laat de lijndikte meeschalen · NL Design System | |
| Positioneer iconen binnen een vierkant grid | Positioneer iconen binnen een vierkant grid · NL Design System | |
| Respecteer conventies | Respecteer conventies · NL Design System | |
| Toptaak iconen kunnen gedetailleerd zijn | Toptaak iconen kunnen gedetailleerd zijn · NL Design System | |
| Introductie richtlijnen voor kleuren | Introductie richtlijnen voor kleuren · NL Design System | |
| Zorg voor voldoende kleurcontrast voor niet-tekstuele content | Zorg voor voldoende kleurcontrast voor niet-tekstuele content · NL Design System | |
| Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond | Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond · NL Design System | |
| Gebruik kleur met een doel | Gebruik kleur met een doel · NL Design System | |
| Vertrouw niet alleen op kleur | Vertrouw niet alleen op kleur · NL Design System | |
| Let op voorkeursinstellingen voor kleur | Let op voorkeursinstellingen voor kleur · NL Design System | |
| Let op verschillen in waarneming van kleur | Let op verschillen in waarneming van kleur · NL Design System | |
| Introductie richtlijnen voor ruimte | Introductie richtlijnen voor ruimte · NL Design System | |
| Werk en denk vanuit het box model | Werk en denk vanuit het box model · NL Design System | |
| Gebruik ruimte om hiërarchie te creëren tussen elementen | Gebruik ruimte om hiërarchie te creëren tussen elementen · NL Design System | |
| Reserveer ruimte tussen interactieve elementen | Reserveer ruimte tussen interactieve elementen · NL Design System | |
| Gebruik ruimte om relaties te creëren tussen elementen | Gebruik ruimte om relaties te creëren tussen elementen · NL Design System | |
| Stem het gebruik van ruimte af op de functie en inhoud | Stem het gebruik van ruimte af op de functie en inhoud · NL Design System | |
| Maak gebruik van de spacing concepten | Maak gebruik van de spacing concepten · NL Design System | |
| Maak gebruik van een spacing scale | Maak gebruik van een spacing scale · NL Design System | |
| Introductie richtlijnen voor typografie | Introductie richtlijnen voor typografie · NL Design System | |
| Zorg ervoor dat letters groot genoeg zijn | Zorg ervoor dat letters groot genoeg zijn · NL Design System | |
| Kies een goed lettertype | Kies een goed lettertype · NL Design System | |
| Zorg voor een comfortabele regelafstand | Zorg voor een comfortabele regelafstand · NL Design System | |
| Zorg voor een comfortabele regellengte | Zorg voor een comfortabele regellengte · NL Design System | |
| Uitlijning | Uitlijning · NL Design System | |
| Let op voorkeursinstellingen voor typografie | Let op voorkeursinstellingen voor typografie · NL Design System |
voorbeelden
| title | title small | document title |
| Introductie | Introductie · NL Design System | |
| Gebruikersonderzoek | Gebruikersonderzoek · NL Design System | |
| Introductie patronen en templates | Introductie patronen en templates · NL Design System | |
| Formulieren | Formulieren · NL Design System | |
| Mijn omgevingen | Mijn omgevingen · NL Design System |
woordenlijst
| title | title small | document title |
| Woordenlijst | Woordenlijst · NL Design System |
open-source
| title | title small | document title |
| Creative Commons 0 Universal licentie | Creative Commons 0 Universal licentie · NL Design System | |
| EUPL 1.2 licentie | EUPL 1.2 licentie · NL Design System |
private
| title | title small | document title |
| Doelen van NL Design System componenten | Doelen van NL Design System componenten · NL Design System |