Skip to main contentSkip to site searchSkip to component search
Honeycomb

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 state
  • flix-textarea--valid - triggers visual valid state
  • flix-textarea--error - triggers visual error state
  • flix-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-label attribute to an input to preserve basic a11y guidelines;
  • add a flix-textarea--no-label modifier 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>