Field Group

Default

.FieldGroup provides a wrapper for grouping form elements and for styling feedback messages and labels.

$
Select all that apply:
<div class="FieldGroup">
  <label class="FieldGroup-label" for="Input-1">Text Input</label>
  <input class="Input" type="text" id="Input-1" placeholder="First Name">
</div>

<div class="FieldGroup">
  <label class="FieldGroup-label" for="select-1">Select Box</label>
  <div class="SelectBox">
    <select class="SelectBox-options" name="select-1" id="select-1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
      <option value="">Option 5</option>
    </select>
  </div>
</div>

<div class="FieldGroup">
  <label class="FieldGroup-label" for="Input-1">Amount Input</label>
  <div class="InputGroup InputGroup--leftIcon">
    <input class="Input" type="text" id="Input-1" placeholder="0.00">
    <span class="InputGroup-icon">$</span>
  </div>
</div>

<div class="FieldGroup">
  <div class="FieldGroup-label u-spaceBottomSm">Select all that apply:</div>
  <div class="Checkbox Checkbox--inline">
    <input class="Checkbox-input" type="checkbox" id="checkbox-1" name="checkbox">
    <label class="Checkbox-label" for="checkbox-1">Checkbox Option 1</label>
  </div>
  <div class="Checkbox Checkbox--inline">
    <input class="Checkbox-input" type="checkbox" id="checkbox-2" name="checkbox">
    <label class="Checkbox-label" for="checkbox-2">Checkbox Option 2</label>
  </div>
</div>

Messages

  • Use .FieldGroup-message to provide supporting or instructional text to form group.
Please provide full URL beginning with http:// or https:// 
<div class="FieldGroup">
  <label class="FieldGroup-label" for="Input-1">Website URL:</label>
  <input class="Input" type="text" id="Input-1" placeholder="https://www...">
  <div class="FieldGroup-message">
    Please provide full URL beginning with http:// or https://
  </div>
</div>

Errors And Feedback

  • The .is-notValid class will add error styling around form elements.
  • The .is-valid class will add success state styling
  • The FieldGroup-message--error modifier can be added to the FieldGroup-message to add error styling.
Input is required
Input is required
Select all that apply:
Input is required 
<div class="FieldGroup is-notValid">
  <label class="FieldGroup-label" for="Input-1">Text Input</label>
  <input class="Input" type="text" id="Input-1" placeholder="First Name">
  <div class="FieldGroup-message FieldGroup-message--error">
    Input is required
  </div>
</div>

<div class="FieldGroup is-notValid">
  <label class="FieldGroup-label" for="select-1">Select Box</label>
  <div class="SelectBox">
    <select class="SelectBox-options" name="select-1" id="select-1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
      <option value="">Option 5</option>
    </select>
  </div>
  <div class="FieldGroup-message FieldGroup-message--error">
    Input is required
  </div>
</div>

<div class="FieldGroup is-notValid">
  <div class="FieldGroup-label u-spaceBottomSm">Select all that apply:</div>
  <div class="Checkbox Checkbox--inline">
    <input class="Checkbox-input" type="checkbox" id="checkbox-1" name="checkbox">
    <label class="Checkbox-label" for="checkbox-1">Checkbox Option 1</label>
  </div>
  <div class="Checkbox Checkbox--inline">
    <input class="Checkbox-input" type="checkbox" id="checkbox-2" name="checkbox">
    <label class="Checkbox-label" for="checkbox-2">Checkbox Option 2</label>
  </div>
  <div class="FieldGroup-message FieldGroup-message--error">
    Input is required
  </div>
</div>

<div class="FieldGroup is-valid">
  <span class="FieldGroup-validation">
    <svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
    </svg>
  </span>
  <label class="FieldGroup-label" for="Input-1">Text Input</label>
  <input class="Input" type="text" id="Input-1" placeholder="First Name">
</div>