Closed Robbert closed 1 year ago
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?
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.
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.
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-->
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
Purpose Invoerveld waar gebruikers één regel aan tekens kunnen invoeren.
-of-
Invoerveld waar één regel aan tekens kan worden ingevuld.