Input Group

[Rozerinay]

We willen graag meer leren over de Input Group 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

Input Group

Doel

Formulierveld waarmee je een waarde kunt bewerken in een groep van meerdere invoervelden.

Ook bekend als

Text Input Group, Control Group.

Gerelateerde componenten

Date Input Group, Form Field Partial, Form Field, Text Input

Onderzoek

[jeffreylauwers]

DUO

Niet als los component gevonden. Maar als als onderdeel van de Form component.

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Filled + Focus

---

Notities

• Binnen een fieldset met legend.
• CSS class van groep invulvelden is input__control-group.
• CSS class van enkel invulveld binnen deze groep is input__control-container.
• Deze aanpak wordt ook toegepast bij de 'Date input' component zoals te zien in de Date Input Group Github Discussion.

[jeffreylauwers]

Open Formulieren

Storybook

---

Screenshots / Varianten

Storybook

Default

Filled + Focus

---

Notities

• Binnen een fieldset met legend (met daarbinnen weer een label?).
• CSS class van groep invulvelden is openforms-input-group.
• CSS class van enkel invulveld binnen deze groep is openforms-input-group__item.
• Deze aanpak wordt ook toegepast bij de 'DateField - input group' component zoals te zien in de Date Input Group Github Discussion.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Input Group op het Community bord