GoComponents

# Fieldset

A fieldset lets users group form controls, legends and labels within a form. It also provides an error message and state for when user input is invalid.

# With legend

<div class="goco-l-grid-container">
  <fieldset class="goco-c-fieldset">
    <legend class="goco-c-fieldset__legend">Legend text</legend>
    <div class="goco-c-fieldset__content">
      <div class="goco-c-input">
        <input class="goco-c-input__native" type="text" placeholder="Placeholder text" />
      </div>
    </div>
  </fieldset>
</div>

# With error

A fieldset element can display feedback notifying the user of an error.

A class of goco-c-fieldset--has-error can be added to the <fieldset class="goco-c-fieldset"> element. A custom error message can then be added to the <span class="goco-c-error-message__text"> element along with an accompanying svg error icon. Both elements need to be placed within a <div class="goco-c-error-message"> element.

<div class="goco-l-grid-container">
  <fieldset class="goco-c-fieldset goco-c-fieldset--has-error">
    <legend class="goco-c-fieldset__legend">Legend text</legend>
    <div class="goco-c-fieldset__content">
      <div class="goco-c-input">
        <input class="goco-c-input__native" type="text" placeholder="Placeholder text" />
      </div>
      <div class="goco-c-error-message">
        <svg class="goco-c-error-message__icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
          <path fill="currentColor" d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10C19.995 4.48 15.52.005 10 0zm0 18.095A8.095 8.095 0 1118.095 10 8.105 8.105 0 0110 18.095zm1.429-12.38v4.761a1.429 1.429 0 11-2.858 0V5.714a1.429 1.429 0 012.858 0zm0 8.57a1.429 1.429 0 11-2.858 0 1.429 1.429 0 012.858 0z" />
        </svg>
        <span class="goco-c-error-message__text">Please enter a valid value</span>
      </div>
    </div>
  </fieldset>
</div>

# With description

A fieldset can display an optional description.

To display the description wrap the text within a <p class="goco-c-fieldset__description"> element.

<div class="goco-l-grid-container">
  <fieldset class="goco-c-fieldset">
    <legend class="goco-c-fieldset__legend">Legend text</legend>
    <p class="goco-c-fieldset__description">Legend description text</p>
    <div class="goco-c-fieldset__content">
      <div class="goco-c-input">
        <input class="goco-c-input__native" type="text" placeholder="Placeholder text" />
      </div>
    </div>
  </fieldset>
</div>

← Fieldset group →