Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Form input styling

Form input styling

Also see /react/input
React component

Basic Input

<input class="bf-input" />

<input class="bf-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.

<div class="bf-input-container">
  <label for="uniqueInputId" class="bf-label">Label element</label>
  <input id="uniqueInputId" class="bf-input" placeholder="Labelled input" />
</div>
<div class="bf-input-container">
  <input
    class="bf-input"
    aria-label="Hidden label"
    placeholder="Input with hidden aria-label"
  />
</div>

<div class="bf-input-container">
  <label for="uniqueInputId" class="bf-label">Label element</label>
  <input id="uniqueInputId" class="bf-input" placeholder="Labelled input" />
</div>
<div class="bf-input-container">
  <input
    class="bf-input"
    aria-label="Hidden label"
    placeholder="Input with hidden aria-label"
  />
</div>

Description

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

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

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

Feedback

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

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

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

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.

<div class="bf-input-container bf-input-alert">
  <label for="alertInput" class="bf-label">Label element</label>
  <input id="alertInput" class="bf-input" />
  <div class="bf-label-feedback">Invalid value</div>
</div>

<div class="bf-input-container bf-input-alert">
  <label for="alertInput" class="bf-label">Label element</label>
  <input id="alertInput" class="bf-input" />
  <div class="bf-label-feedback">Invalid value</div>
</div>

Disabled

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

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

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

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:

<div class="bf-input-container">
  <label for="iconInput" class="bf-label">Left aligned icon</label>
  <div class="bf-input-icon-container bf-input-icon-left">
    <input id="iconInput" class="bf-input" />
    <span class="bf-input-icon">
      <i class="fa-solid fa-user"></i>
    </span>
  </div>
</div>

<div class="bf-input-container">
  <label for="iconInput" class="bf-label">Left aligned icon</label>
  <div class="bf-input-icon-container bf-input-icon-left">
    <input id="iconInput" class="bf-input" />
    <span class="bf-input-icon">
      <i class="fa-solid fa-user"></i>
    </span>
  </div>
</div>

Search examples

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

<div class="bf-input-container ">
  <div class="bf-input-icon-container bf-input-icon-left">
    <input class="bf-input" placeholder="Filter" aria-label="Filter" />
    <span class="bf-input-icon">
      <i class="fa-solid fa-search"></i>
    </span>
  </div>
</div>
<div class="bf-input-container">
  <div class="bf-input-icon-container bf-input-icon-right">
    <input class="bf-input" placeholder="Search" aria-label="Search" />
    <button class="bf-input-icon bf-input-icon-button">
      <i class="fa-solid fa-search"></i>
    </button>
  </div>
</div>
<div class="bf-input-container">
  <div
    class="bf-input-icon-container bf-input-icon-right bf-input-icon-button-filled"
  >
    <input class="bf-input" placeholder="Search button" aria-label="Search" />
    <button class="bf-input-icon bf-input-icon-button">
      <i class="fa-solid fa-search"></i>
    </button>
  </div>
</div>

<div class="bf-input-container ">
  <div class="bf-input-icon-container bf-input-icon-left">
    <input class="bf-input" placeholder="Filter" aria-label="Filter" />
    <span class="bf-input-icon">
      <i class="fa-solid fa-search"></i>
    </span>
  </div>
</div>
<div class="bf-input-container">
  <div class="bf-input-icon-container bf-input-icon-right">
    <input class="bf-input" placeholder="Search" aria-label="Search" />
    <button class="bf-input-icon bf-input-icon-button">
      <i class="fa-solid fa-search"></i>
    </button>
  </div>
</div>
<div class="bf-input-container">
  <div
    class="bf-input-icon-container bf-input-icon-right bf-input-icon-button-filled"
  >
    <input class="bf-input" placeholder="Search button" aria-label="Search" />
    <button class="bf-input-icon bf-input-icon-button">
      <i class="fa-solid fa-search"></i>
    </button>
  </div>
</div>

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>

<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" />

<input autocomplete="off" />

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-input-container">
    <label for="uniqueInputId" class="bf-label">Label</label>
    <div class="bf-label-description">Description</div>
    <input
      id="uniqueInputId"
      class="bf-input"
      placeholder="input placeholder"
    />
    <div class="bf-label-feedback">Feedback</div>
  </div>
</div>
Open on CodeSandboxOpen Sandbox