COMPONENTS

Form groups

One form-group class keeps a native label, control and help text together. Theme and control settings inherit from the parent; use fieldset and legend for related choices.

Usage

Markup: .form-group; optional .field-error

Behaviour: Error display and announcements are application-owned.

  • Every control needs an accessible label. Match label for to a unique control id. Associate help and error text using aria-describedby; placeholders do not replace labels.
  • Use native required, disabled and readonly where appropriate. aria-invalid="true" marks a known validation error; your server or application owns the error text and when it is shown. CSS does not generate validation messages.
  • The optional field-error class styles explicit error text. State the error in words and explain how to fix it; do not rely only on a red border.
  • Use existing grid and stack classes for arrangement. This component adds no grid system. Optional glass affects existing fieldsets, while text controls retain their normal readable backing.

Component API and styling module · Inherited appearance settings

Label, control and help

Only the group needs a class. IDs connect the label and explanation to the native control.

The name shown on your public profile.
HTMLSelect text to copy
<div class="form-group">
  <label for="profile-display-name">Display name</label>
  <input id="profile-display-name" name="display-name"
         autocomplete="nickname" aria-describedby="profile-name-help">
  <small id="profile-name-help">The name shown on your public profile.</small>
</div>

A known validation error

This static server-validation example includes an explicit error and aria-invalid. No automatic validation script is added.

We use this for account notifications. Enter a complete email address, such as name@example.com.
HTMLSelect text to copy
<div class="form-group">
  <label for="profile-email">Email address (required)</label>
  <input id="profile-email" name="email" type="email" required
         autocomplete="email" value="invalid-address" aria-invalid="true"
         aria-describedby="profile-email-help profile-email-error">
  <small id="profile-email-help">We use this for account notifications.</small>
  <small class="field-error" id="profile-email-error">Enter a complete email address, such as name@example.com.</small>
</div>

Responsive grouped fields

Existing grid layout arranges groups. A textarea and select retain native behavior and shared control styling.

Write a short introduction.
HTMLSelect text to copy
<div class="grid" data-size="medium" data-density="comfortable">
  <div class="form-group">
    <label for="profile-language">Language</label>
    <select id="profile-language" name="language">
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  </div>
  <div class="form-group">
    <label for="profile-bio">About you</label>
    <textarea id="profile-bio" name="bio" rows="3"
              aria-describedby="profile-bio-help"></textarea>
    <small id="profile-bio-help">Write a short introduction.</small>
  </div>
</div>

Related choices in a fieldset

The legend names the group. Each radio has its own native label. This fieldset inherits optional glass material.

Preferred contact method
Choose one contact method.
HTMLSelect text to copy
<section data-material="glass" data-theme="dark">
  <fieldset aria-describedby="contact-channel-help">
    <legend>Preferred contact method</legend>
    <div class="form-group">
      <label><input type="radio" name="contact-channel" value="email" checked> Email</label>
      <label><input type="radio" name="contact-channel" value="phone"> Phone</label>
      <small id="contact-channel-help">Choose one contact method.</small>
    </div>
  </fieldset>
</section>