Component: Text input

[Robbert]

• [ ] HTML/CSS component
• [ ] Web Component
• [ ] Figma component
• [ ] Design tokens
• [ ] Documentation

[usethetics]

Do we use this component only for the input type="text" input, or are e-mail address, telephone, number input and such also part (variations) of this component?

[usethetics]

Comments from @macedvisioned from general form guidelines that are better suited for the guidelines of specific components:

Toevoegen patronen bijvoorbeeld bij invullen bsn nummer of e-mailadres Foutmelding bij verkeerd bsn nummer

Wanneer de telling van de afzonderlijke som niet voldoet aan de zogenaamde 11-proef en de som niet deelbaar is door 11 wordt de ingevulde waarde afgekeurd.

[usethetics]

A comment by @macedvisioned from the general form guidelines better suited for the guidelines of input type=email:

Patroon voor valideren e-mailadres: Met deze validatie wordt een test gedaan of het e-mailadres valide is. Hierbij wordt ook gekeken of de invoer hoofdletter gevoelig is.

In dit voorbeeld wordt bij het e-mailadres een willekeurige tekst ingevuld. Hierna verschijnt dan een foutmelding onder het veld. De validatie test of de ingevulde waarde voldoet aan de juiste conventie. Apenstaartje en toegevoegde internet extensie.

[macedvisioned]

Forms conventions are mentioned here https://github.com/nl-design-system/backlog/issues/112 Design tips https://webaim.org/techniques/forms/controls#input Use when: have to fill in short text which fits to one line. Pattern: you can also use this text input with combinations of patterns, see more about patterns in issue # Don't use: when you want to fill in multi lines of text until a maximum of 5000 characters.

<!--tekstveld-->
<h2>Textfields formatting according to WCAG guidelines</h2> 
<div id="uniquecontrolID" class="question-required-field" data-active="True" data-isfirstcontrol="False" data-type="question"> 
<!--field data specifications here above--> 
<div class="label">
<label for="uniqueLabelName" id="uniqueLabelID" class="question-label" aria-labelledby="label"><!--labelDescription--></label>
</div>
<div class="control">
<div>
<span style="display:none;" id="ariadescID" class="ariadesc"><!--alt description--></span><span id="UniqueErrorMessageID" class="errormessage" style="display: inline;"></span><input name="uniqueElementName" type="text" id="uniqueElementID" title="titleDescription" class="generic-input question-control" aria-describedby="ariadescID" aria-required="true" placeholder="<!--only when pattern is required-->"><div class="validate-callout" aria-live="polite" role="alert" style="top: 60px; left: 1px; display: none;"><strong aria-hidden="true"><!--understandable value--></strong><br><!--required description--><br>
<!--validating code, in some cases you will use an external source like in Visual Studio for validating form fields-->
<div class="validate-callout-co-up2" style="left: 0px;"></div><div class="validate-callout-co-up" style="left: 0px;"></div></div><img id="uniqueElementID_callout-validator_0" class="callout-validator" src="/external webresource that validates, like a js or external css file" alt="alt description here" style="inline css code">
</div>
</div>
</div>
<!--end tekstveld-->

[usethetics]

Huidige componenten en documentatie:

Den Haag https://github.com/nl-design-system/denhaag/tree/main/components/TextField https://www.figma.com/file/JpoY3waVoQGlLQzQXTL9nn/Design-System---Gemeente-Den-Haag?node-id=1%3A1653

Utrecht https://github.com/nl-design-system/utrecht/tree/main/components/textbox https://www.figma.com/file/msb3CfQBefPoruqNQ968Zh/Utrecht-Design-System?node-id=302%3A3975

[jeffreylauwers]

Purpose Invoerveld waar gebruikers één regel aan tekens kunnen invoeren.

-of-

Invoerveld waar één regel aan tekens kan worden ingevuld.