Customizable Text Input

[eelcobosklopper]

Naam

Customizable Text Input (werknaam).

Gebaseerd op de customizable select

Beschrijving

Uitbreiding voor iconen, knoppen of tekst aan het begin of einde van een invoerveld.

Ook bekend als

• Input Adornment
• Input Group
• Input Add-on

Gerelateerde componenten

• Text input (utrecht-textbox/nl-text-input): wordt uitgebreid door dit component
• Combobox (utrecht-combobox): wordt uitgebreid door dit component
• Zoekveld: Hier wordt vaak een icoon en button in combinatie met een veld gebruikt.
• Icon: wordt vaak in de slots geplaatst
• Button: wordt vaak in de slots geplaatst

Onderzoek

• Input prefix/suffix - U.S. Web Design System (USWDS) "input group"-component van een ander overheids-design-system. Onderbouwing is vooral praktisch (helpt gebruikers sneller begrijpen wat voor informatie gevraagd wordt, bijv. "$" of "lbs.") en steunt op WCAG 2.1 AA, geen peer-reviewed onderzoek.
• Form input prefixes and suffixes - GOV.UK Design System backlog prefix/suffix-slots zijn toegevoegd aan het GOV.UK tekstveld voor eenheden, valuta, percentages en kentekens. Direct vergelijkbaar met de tekst-slots van dit component.
• 8 Recommendations for Creating Effective Input Fields - Baymard Institute een leidend icoon helpt gebruikers in één oogopslag de betekenis van het veld te begrijpen. Een icoon aan het eind kan gebruikt worden om te valideren of het veld te wissen.

[eelcobosklopper]

Amsterdam

Heeft geen Customizable Text Input. Het heeft wel variatie van het component in de vorm van een zoekveld met een knop: de Search Field

Storybook
Git React component
Figma

[eelcobosklopper]

Open Formulieren

NumberField

Best uitgewerkte variant met pre- en suffix.

Storybook
Github

InputContainer

Daarnaast is er ook een generiekere variant maar die is nog niet heel goed uitgewerkt.

Storybook
Github

[eelcobosklopper]

Den Haag

Heeft een Open Formulieren implementatie.

Storybook

[eelcobosklopper]

DSO (Digitaal Stelsel Omgevingswet)

Heeft geen Customizable Text Input. Het heeft wel variatie van het component in de vorm van een zoekveld met een knop: de Search Bar.

Storybook
Github

[eelcobosklopper]

RVO (ROOS)

Bij ROOS is de functionaliteit ingebouwt in het Text Input veld met een suffix en prefix.

Storybook
Github

[eelcobosklopper]

MUI (Material UI)

Heet hier een input group.

Site

[eelcobosklopper]

Bootstrap

Heet hier een input group.

https://getbootstrap.com/docs/4.0/components/input-group/

[bartveneman]

Web Awesome

Hier heet het een Input met end- en start-decorations.

https://webawesome.com/docs/components/input/#start-and-end-decorations

[eelcobosklopper]

Developer Open Hour

Besproken bij de Developer Open Hour #111.

Aanwezigen

• Casper
• Charlotten
• Jeffrey
• Eelco

Notities

Casper

Bekend mee, ook in vorige klussen. Zeker nuttig.

Zoekknop is een twijfelgeval, dat zou ook een form kunnen zijn met een input en submit, de DOM structuur mag daarin afwijken van de Customizable Text Input.

Gedachte: Kan het geen customization zijn op de bestaande Text Input?
Note kernteam: Dat is optioneel; kan wrapper zijn, kan implementatie met Text Input zijn. Deze gedachte impliceert dat de naam nog niet duidelijk is.

"Customizable" mogelijk te brede naamgeving, maar je wilt ook geen TextInputMetSomeButtonAndAnotherButton oid.

De voorbeelden in de GitHub discussie wisselen kwa functionaliteit; die van Bootstrap is heel concreet dat je maar 1 ding kan invullen, de rest is visueel niet interactief. Maar je hebt bijvoorbeeld ook een Search of een Password, waar dan die buttons wel interactief zijn, mogelijk kunnen verdwijnen / appearen.

Prefix/Suffix/Start/End: allemaal fijn en duidelijk.
Misschien dat ze ook verschillende dingen kunnen zijn, dat bijv prefix/suffix hardcoded zijn zoals Bootstrap/MUI.
En dat Start/End dan juist de interactieve zijn.

Beschrijving: goed. Mogelijk nog iets verduidelijken over dat het effect heeft op de ruimte van de text input, maar misschien dat dat niet echt in de beschrijving moet.

Groepsbrede notities

Jeffrey - Alternatieve namen: input-wrapper of text-input-wrapper. Casper is niet blij.
Eelco - ik ben zelf eigenlijk nog wel voorstander van input group aangezien ie zo wordt genoemd door andere grote partijen. Algemene reactie: beeld bij input group meer een verzameling van input velden. Dit component hebben bestaat nu ook zo.
Casper - wat wij hebben als input group = "composite input" misschien.
Jeffrey - Ik vind Composite Input voor deze Customizable Text Input, eigenlijk geen gek idee. Je stelt het veld samen met extra-tjes. Casper is niet blij.

Algemene take-aways

• Allemaal overtuigd van de waarde van de feature.
• Je zou het al los component kunnen ontwikkelen en/of als feature aan bestaande componenten kunnen toevoegen.
• Nog ontevredenheid over de naam

[cascassette]

Nog even ter verduidelijking van mijn positie:
Namen als text-input-wrapper ben ik niet blij mee omdat zo'n naam zich

1. concentreert op de technische kant en implementatie, terwijl
2. de naam van het component misschien wel het eerste en belangrijkste outward-facing facet is waar afnemers naar kijken, en dus
3. de naam meer raking zou moeten hebben met waar je het voor gebruikt

Voor de andere input waar we het over hadden, die bijvoorbeeld wordt gebruikt als datumveld waar je dag, maand en jaar eigenlijk als 1 input wil kunnen zien (want, 31 februari is geen geldige datum bijvoorbeeld), vind ik zowel composite-input als input-group prima namen. input-group is misschien het meest logisch omdat het een doel heeft soortgelijk aan radio-group.

Ik stel mijn mening iets bij over composite-input gebruiken als naam voor deze "Customizable Text Input". Op zich kan het wel. Maar liefst, nogmaals, zou ik zien dat het een standaardfunctionaliteit is van de Text Input / Password Input / * Input, óf een wrapper component die je op elk van die input componenten kan toepassen. Eventueel zelfs dat de start-wrapper en end-wrapper twee losse wrapper-componenten zijn.

[eelcobosklopper]

✨ Dit component is nu Help Wanted ✨

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

[eslook]

Ik kwam 'm ook tegen in Elastic UI, als Form Layouts: Prepends and appends - https://eui.elastic.co/docs/components/forms/layouts/prepend-append/

Ook is het mogelijk voor toegankelijkheid om hier id's aan mee te geven.

FormPrepend is een los component, waarin je onder andere kan meegeven: label, iconLeft, iconRight. (Omdat je dus ook binnen de prepend een icon aan beide kanten van de tekst kan zetten).

FormAppend is een los component, waarin je onder andere kan meegeven: label, iconLeft, iconRight.