Input

Basic Input

Label all inputs

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

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

Description

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

Feedback

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

Description and feedback

Alert state

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

Read only

A readonly input field is not editable. You should add a "lock" icon next to its label. It is useful for displaying information that can be copied, that should not be changed by the user, but still needs to be visible.

Disabled

Disable the field using:

• .bf-input-disabled on the container
• .bf-label-disabled on the label element and a lock icon next to it
• disabled attribute on the input element

Icon

Inputs are void elements, which means they cannot wrap around other elements, making it tricky to place icons and making sure they don't overlap the input text. Therefore you need a few extra elements and classes to make sure everything looks and works correctly:

Search examples

The icon can placed right, and be a clickable button if you like, optionally styled as a filled button.

Loading spinner

<div class="bf-input-container">
  <label for="loadingInput" class="bf-label">Loading...</label>
  <div class="bf-input-icon-container bf-input-icon-right">
    <input id="loadingInput" class="bf-input" />
    <span class="bf-input-icon">
      <i class="fa-duotone fa-spinner-third fa-spin bfc-theme"></i>
    </span>
  </div>
</div>

Disable autocomplete

Disable the browser autocomplete with autocomplete="off"

<input autocomplete="off" />