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.