Textarea
Text area can be used to capture long text (or number) information from users.
Implementation details
Textarea have same style options as normal inputs with a similar approach to class modifiers. Following set of modifier classes is available:
flix-textarea--active- triggers visual active stateflix-textarea--valid- triggers visual valid stateflix-textarea--error- triggers visual error stateflix-textarea--disabled- triggers visual disabled state*flix-textarea--no-label- use if input without label is needed (this makes sure all the icons and other elements still placed properly);
*Please note that flix-textarea--disabled only changes the visual appearance of the control, ensure adding disabled attribute for disabling an input (This is related to any form input).
State options
Default
<div class="flix-form-row">
<div class="flix-textarea">
<label class="flix-textarea__label flix-label" for="text-area-simple">Textarea</label>
<textarea id="text-area-simple" class="flix-textarea__field">Example text</textarea>
</div>
</div>Active
<div class="flix-form-row">
<div class="flix-textarea flix-textarea--active">
<label class="flix-textarea__label flix-label" for="text-area-active">Active textarea</label>
<textarea id="text-area-active" class="flix-textarea__field">Example text</textarea>
</div>
</div>Disabled
<div class="flix-form-row">
<div class="flix-textarea flix-textarea--disabled">
<label class="flix-textarea__label flix-label" for="text-area-disabled">Disabled textarea</label>
<textarea id="text-area-disabled" class="flix-textarea__field" disabled="">Example text</textarea>
</div>
</div>Valid
<div class="flix-form-row">
<div class="flix-textarea flix-textarea--valid">
<label class="flix-textarea__label flix-label" for="text-area-valid">Valid textarea</label>
<textarea id="text-area-valid" class="flix-textarea__field" aria-invalid="false">A piece of very valid text</textarea>
</div>
</div>Error
An error occurred
Additional info text for this field, if needed.
<div class="flix-form-row">
<div class="flix-textarea flix-textarea--error">
<label class="flix-textarea__label flix-label" for="text-area-error">Textarea with error</label>
<textarea id="text-area-error" class="flix-textarea__field" aria-invalid="true" aria-errormessage="textarea-error-message" aria-describedby="textarea-additional-info">There is something wrong in here.
Connect error information with `aria-errormessage` attribute.
Additional information must be connected via `aria-describedby` attribute.
</textarea>
<span id="textarea-error-message" aria-live="assertive" class="flix-textarea__info">An error occurred</span>
<span id="textarea-additional-info" class="flix-textarea__info">Additional info text for this field, if needed.</span>
</div>
</div>Textarea without visible label
Certain cases and design decisions require you to use form fields without visible label. If the case there are 2 things you need to make sure doing:
- add an
aria-labelattribute to an input to preserve basic a11y guidelines; - add a
flix-textarea--no-labelmodifier class to component;
Check example code above for more details.
<div class="flix-form-row">
<div class="flix-textarea flix-textarea--no-label flix-textarea--valid">
<textarea aria-label="Textarea with no visible label" id="text-area-valid-no-label" class="flix-textarea__field">Textarea with no visible label must always have `aria-label` attributed.
</textarea>
</div>
</div>