search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
10 stars 1 forks source link

Text Area #40

Open usethetics opened 3 years ago

usethetics commented 3 years ago

Naam

Text Area

Link naar GitHub Discussion

Notities

<textarea> component allows users to enter multi-line text for use when more data is expected than a regular text input can contain.

Use when

You expect users to enter large amounts of text.

Don’t use when

You expect users to only enter small amounts of text.

usethetics commented 3 years ago

Shares most styling, logic and behaviour from text input component.

usethetics commented 3 years ago

Copy/paste from @macedvisioned's remarks in the form guidelines:

Zorg bij textarea’s ook dat deze schaalbaar is. Voorbeeld van een schaalbare textbox. Screenshot 2021-04-28 at 14 26 47

Deze textbox toont default 4 rijen en niet te breed zodat deze mobiel toegankelijk is. Het veld krijgt een optie om een maximum in te stellen van (maximaal 5.000 karakters). Wanneer er 4 rijen zijn gevuld verschijnt een scrollbar. Indien het aantal van 5.000 karakters wordt overschreden kan een optie worden ingesteld om dan een een aparte bijlage toe te voegen.

macedvisioned commented 3 years ago

Forms conventions are mentioned here https://github.com/nl-design-system/backlog/issues/112 Design tips https://webaim.org/techniques/forms/controls#textarea

Use when: have to fill in long text with a maximum of 5000 characters. Pattern: - Don't use: when you want to fill in multi lines of text until more than 5000 characters. In stead of use a textarea use an upload field for adding attachments. Textarea fields formatting according to WCAG guidelines

<div id="uniquecontrolID" class="question-required-field" data-active="False" data-isfirstcontrol="False" data-type="question"> 
<!--field data specifications here above--> 
<div class="label">
<label for="uniqueLabelName" id="uniqueLabelID" class="question-label"><!--labelDescription--></label>
</div>
<div class="control">
<div>
<span style="display:none;" id="ariadescID" class="ariadesc">Vul hier uw opmerkingen in (maximaal 5.000 tekens)</span><textarea name="txtOpmerkingen" rows="2" cols="20" id="txtOpmerkingen" title="Vul hier uw opmerkingen in (maximaal 5.000 tekens)" class="generic-input question-control" aria-describedby="ariadescID" placeholder="" maxlength="5000"></textarea><span class="charsRemainingCounter">0/5000</span>
</div>
</div>
</div>
<!--end textarea-->