Text Area

[Rozerinay]

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

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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 Area

Doel

Invoerveld voor het bewerken van meerdere regels tekst.

Gerelateerde componenten

Form Field, Form Field Description, Form Field Error Message, Form Field Label, Text Input

Onderzoek

Field-sizing just works! - Polypone
Artikel dat gaat over de nieuwe CSS-eigenschap field-sizing, waarmee invoervelden automatisch worden geschaald op basis van hun inhoud, waardoor JavaScript hiervoor niet meer nodig is.

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.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Vertical resize

Horizontal resize

No resize

Invalid

Disabled

---

Notities

• Het formaat (hoogte en breedte) kan worden gewijzigd met behulp van attributen cols en rows.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.
• Documentatie beschikbaar.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Figma - Huidig

Figma - WIP

---

Notities

• Textarea in Storybook is een specifieke modifier die verwijst naar de integratie van OpenForms.
• Alleen de hoogte kan worden ingesteld.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.
• In Figma zijn 2 groottes te zien: default en large. Het verschil is de grootte in de ingevoerde tekst.
• Documentatie beschikbaar (Figma).

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Disabled

Read-only

---

Notities

• Het formaat (hoogte en breedte) kan worden gewijzigd met behulp van attributen cols en rows.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.

[Rozerinay]

DUO

• Documentatie website

---

Screenshots / Varianten

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.

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

---

Notities

• Het formaat (hoogte en breedte) kan worden gewijzigd.
• Geen vaste limiet op tekstlengte.
• Textarea groeit automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is geen scrollbar aanwezig.
• Hinttekst staat op dezelfde plek als de markering van een optioneel veld (staat los van Textarea component).
• Documentatie beschikbaar.

[Rozerinay]

Open Formulieren

• Storybook

---

Screenshots / Varianten

---

Notities

• Alleen de hoogte kan worden ingesteld.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.

[Rozerinay]

OpenGemeenten

• Patternlab

---

Screenshots / Varianten

Description

Error

Placeholder

Required

Value

---

Notities

• Alleen de hoogte kan worden ingesteld.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Figma

Big text field

---

Notities

• Er is een vaste minimale hoogte.
• Alleen de hoogte kan worden ingesteld.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Disabled

Focus

Invalid

Figma

Default, input false and true

Inactive, input false and true

Error, input false and true

---

Notities

• Is onderdeel van Text input.
• Alleen de hoogte kan worden ingesteld.
• Vaste limiet op tekstlengte kan worden ingesteld.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.
• Beschikbaar in sizes xs, sm, lg en xl, maar werkt niet wanneer je wilt schakelen naar deze formaten.

[Rozerinay]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Placeholder

Placeholder (right-to-left)

Right-to-left

Disable spell-check

Disabled

Invalid

Read-only

Required

Focus

Focus-visible

Hover

Figma

---

Notities

• Alleen de hoogte kan worden ingesteld.
• Geen vaste limiet op tekstlengte.
• Textarea is fixed. Het groeit niet automatisch mee met de inhoud als er meer tekst wordt ingevoerd.
• Er is een scrollbar te zien wanneer je scrolt.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

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