CSS reference - Bifrost

Textarea

Basic textarea

HTML

<textarea class="bf-textarea"></textarea>

Label all fields

Always include a readable label, preferably through a visible, connected <textarea> element, or alternatively through a hidden aria-label attribute.

Wrap the associated elements together in .bf-textarea-container, for layout purposes.

HTML

<div class="bf-textarea-container">
  <label for="uniqueTextareaId" class="bf-label">Label element</label>
  <textarea
    id="uniqueTextareaId"
    class="bf-textarea"
    placeholder="Labelled textarea"
  ></textarea>
</div>
<textarea
  class="bf-textarea"
  aria-label="Hidden label"
  placeholder="Hidden aria-label"
></textarea>

Label element

Description

Additional information can be added on a .bf-label-description element.

HTML

<div class="bf-textarea-container">
  <label for="descTextarea" class="bf-label">Label element</label>
  <div class="bf-label-description">Additional information</div>
  <textarea id="descTextarea" class="bf-textarea"></textarea>
</div>

Label element

Additional information

Feedback

You can provide dynamic feedback below the textarea with the .bf-label-feedback class.

HTML

<div class="bf-textarea-container">
  <label for="feedbackTextarea" class="bf-label">Label element</label>
  <textarea id="feedbackTextarea" class="bf-textarea"></textarea>
  <div class="bf-label-feedback">Feedback text</div>
</div>

Label element

Feedback text

Disabled

Disable the field using .bf-textarea-disabled on the container and disabled attribute on the textarea element.

HTML

<div class="bf-textarea-container bf-textarea-disabled">
  <label for="disabledTextarea" class="bf-label">Label element</label>
  <textarea disabled id="disabledTextarea" class="bf-textarea"></textarea>
</div>

Label element

Icon

Textareas cannot wrap around other elements, making it tricky to place icons.
Therefore you need a few extra elements and classes to make sure everything looks correctly:

HTML

<div class="bf-textarea-container">
  <label for="iconTextarea" class="bf-label">Warning icon</label>
  <div class="bf-textarea-icon-container">
    <textarea id="iconTextarea" class="bf-textarea"></textarea>
    <i class="fa-solid fa-triangle-exclamation bf-textarea-icon"></i>
  </div>
</div>

Warning icon

Alert state

Render a red underline when there's something wrong with the textarea, using .bf-textarea-alert on the container, preferably along with a feedback message letting the user know what's wrong.

HTML

<div class="bf-textarea-container bf-textarea-alert">
  <label for="alertTextarea" class="bf-label">Label element</label>
  <div class="bf-textarea-icon-container">
    <textarea id="alertTextarea" class="bf-textarea"></textarea>
    <i class="fa-solid fa-triangle-exclamation bf-textarea-icon"></i>
  </div>
  <div class="bf-label-feedback">Invalid value</div>
</div>

Label element

Invalid value

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding">
  <div class="bf-textarea-container">
    <label for="uniqueTextareaId" class="bf-label">Label</label>
    <div class="bf-label-description">Description</div>
    <textarea
      id="uniqueTextareaId"
      class="bf-textarea"
      placeholder="textarea placeholder"
    ></textarea>
    <div class="bf-label-feedback">Feedback</div>
  </div>
</div>