Text Input

[jeffreylauwers]

We willen graag meer leren over het Text Input component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Text Input

Doel

Biedt de mogelijkheid om één regel aan tekens in te vullen.

Gerelateerde componenten

Checkbox Group, Date Input, File Input, Number Input, Password Input, Radio Group, Text Area, Text Input Group

Richtlijnen

Placeholders in een formulier - NL Design System
Onze richtlijnen rondom placeholders in formulieren.

Autocomplete in een formulier - NL Design System
Onze richtlijnen rondom autocomplete in formulieren.

Onderzoek

A Checklist for Designing Mobile Input Fields - Nielsen Norman Group
Checklist voor ontwerp van input velden.

Placeholders in Form Fields Are Harmful - Nielsen Norman Group
Artikel over het gebruik van placeholders.

The problem with placeholders and what to do instead - Adam Silver
Adam Silver legt uit waarom placeholders voor problemen zorgen.

8 Recommendations for Creating Effective Input Fields - Baymard Institute
Artikel met tips voor Text Input gebaseerd op onderzoek.

Under-Engineered Text Boxen - Adrian Roselli
Artikel met tips voor Text Input.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Placeholder
It is possible to place placeholder text in the text input. A placeholder should not contain crucial information. Using a suggestion or example can help clarify something for the user. Suggestions are not a substitute for an explanation or instruction provided in an error message or description. Placeholder text disappears as soon as the user starts entering data.

Invalid
Whenever possible, use real-time validation of data when filling out forms. Incorrectly filled input fields become visible immediately.

Disabled

Figma
Text input variants

Toepassing voor verschillende input types

---

Notities

• Onder de naam: Text input.
• In Figma worden Form field label, Form field description, Form field error message meegenomen.
• In Figma zijn er voor verschillende formaten voor Desktop, Tablet en Mobile.
• In Figma wordt de toepassing voor verschillende vormen van input types weergegeven.
• Form field label bold font-weight. Input data regular font-weight.
• Richtlijnen beschikbaar (Storybook).

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook

Default

Disabled

Invalid

Figma - Huidig

Text input variants

Figma - WIP

---

Notities

• Onder de naam: TextInput (Storybook), Text field (Figma - Huidig) en Text input (Figma - WIP).
• In Figma - Huidig worden Form field label, Form field description, Form field error message meegenomen.
• In Figma - Huidig twee verschillende formaten; Default en Large.
• In Figma - Huidig optie voor een trailing icon (calendar) of error icon (exclamation mark).
• Form field label bold font-weight. Input data regular font-weight.
• Richtlijnen beschikbaar.

[jeffreylauwers]

DSO Toolkit

• Storybook

---

Screenshots / Varianten

Storybook

---

Notities

• Onder de naam: Input.
• Ondergebracht bij 'Form group' waardoor Form field label, Form field description, Form field error message, etc. direct worden meegenomen.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Met hinttekst
Gebruik hinttekst voor hulp die relevant is voor de meeste gebruikers, zoals hoe hun informatie zal worden gebruikt of waar deze te vinden is.

Optionele velden
Niet verplichte invoervelden zijn gemarkeerd als optioneel. Een veld is standaard verplicht.

Valuta
Als je als antwoord een geldbedrag verwacht, help de gebruiker dan snel op weg door een input met een valuta teken te gebruiken.

Wachtwoord
Bij het vragen van een wachtwoord.

Formaten
De lengtes van inputfields geven een hint over wat je moet invullen. Bij een kort antwoord past een klein formaat. Het juiste formaat helpt gebruikers beter te begrijpen wat ze moeten invoeren.

Maximale aantal tekens
Wanneer een gebruiker een maximaal aantal tekens mag invoeren.

Text Input statussen
Uitgeschakeld veld

Verkeerde invoer
Wanneer een gebruiker een verplichte vraag verkeerd of niet ingevuld heeft, tonen we een foutmelding.

---

Notities

• Form field label, Form field description, Form field error message worden meegenomen. Al is Label ook apart gedocumenteerd.
• Toepassing voor verschillende vormen van input types (valuta, wachtwoord) beschikbaar.
• Opties voor verschillende breedte beschibaar.
• Opties voor maximaal aantal tekens beschikbaar.
• Form field label regular font-weight. Input data bold font-weight.
• Richtlijnen beschikbaar.

[jeffreylauwers]

Open Formulieren

• Storybook

---

Screenshots / Varianten

Storybook

Default

Invalid state

---

Notities

• Onder de naam: TextField.
• Form field label, Form field description, Form field error message worden meegenomen.
• Form field label regular font-weight. Input data bold font-weight.

[jeffreylauwers]

Open Gemeenten

• Patternlab - Forms and Search

---

Screenshots / Varianten

Patternlab

---

Notities

• Onder de naam: Text.
• Form field label, Form field description, Form field error message worden meegenomen.
• Form field label regular font-weight. Input data regular font-weight.

[jeffreylauwers]

Rotterdam

• Figma
• Storybook

---

Screenshots / Varianten

Storybook

Default

Disabled

Invalid

Search

Figma

States

---

Notities

• In Figma aangeboden onder Fields.
• In Figma icon optie beschikbaar (Left, Right en Both)
• In Figma toegepast voor verschillende formulier elementen.
  • Dropdown (Select)
  • Dropdown multi-select
  • Search
  • Datepicker
  • File upload
• Form field label bold font-weight. Input data regular font-weight.
• Kan worden voorzien van een short validation message.

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Onder de naam: Text input.
• In Storybook verschillende opties beschikbaar o.a.
  • States
  • Placeholder
  • Prefix en Suffix
  • Size
  • Max length
• In Storybook enkele richtlijnen voor Form field an sich beschikbaar.
• In Figma een combinatie met Textarea.
• Form field label bold font-weight. Input data regular font-weight.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Disabled

Invalid

Read-only

Required

Focus-visible

Figma

States

---

Notities

• Onder de naam: Textbox (Storybook), Text input (Figma).
• In Storybook veel documenatie beschikbaar o.a.
  • Metadata (Autocomplete, Spellcheck, Translate)
  • Types (Tel, Email, Website, Password)
  • NAW gegevens
• Form field label bold font-weight. Input data regular font-weight.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Text input op het Community bord

[MariekeBrouwer]

Kleine aanvulling;

• Gebruik van text input verschilt in formaat
• Grote textinput wordt gebruikt voor velden waar een inwoner meer tekens weg kan zetten

[jeffreylauwers]

Bedankt voor je aanvulling Marieke! In dat geval spreken we over de Text Area component.

https://github.com/orgs/nl-design-system/discussions/297

Op de documentatie pagina zullen we als kernteam aangeven wanneer je Text Input en Text Area gebruikt.

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Text Input op het Candidate bord