FieldGroup

Basic fieldgroup

.bf-fieldgroup is a container for grouping multiple related input fields together.

<div class="bf-fieldgroup">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>

Alert fieldgroup

.bf-fieldgroup-alert Gives a red outline for the whole group

<div class="bf-fieldgroup bf-fieldgroup-alert">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>

Fieldgroup with label

Since fieldgroup deals with multiple form fields, each of which should have their own label, we can mark up the grouped fields as a <fieldset> with a <legend> styled as a .bf-label.

<fieldset class="bf-fieldset">
  <legend class="bf-label">Label for grouped fields</legend>
  <div class="bf-fieldgroup">
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email name"
        placeholder="email"
      />
    </div>
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email domain"
        placeholder="@example.com"
      />
    </div>
  </div>
</fieldset>

Label variants

See our label for how to style labels in different states such as required, optional, disabled, and read only.

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">
  <fieldset class="bf-fieldset">
    <legend class="bf-label">Email address</legend>
    <div class="bf-fieldgroup">
      <div class="bf-input-container">
        <input
          type="text"
          class="bf-input"
          aria-label="email name"
          placeholder="email"
        />
      </div>
      <div class="bf-input-container">
        <input
          type="text"
          class="bf-input"
          aria-label="email domain"
          placeholder="@example.com"
        />
      </div>
    </div>
  </fieldset>
</div>