Skip to main contentSkip to site searchSkip to component search
Honeycomb

Fieldset

Fieldset component is used to group several inputs that are related to each other in nature.

Grouping form elements inside of a form helps users understand that those form controls are related to each other in nature.

For example:

  • User information: "First name", "Last name", "Date of birth".
  • Trip details: "Origin", "Destination", "Departure date", "Return date"
  • Contact details: "Telephone number", "Address", "E-mail address"

A fieldset is captioned by a legend and the legend should be the first element of the fieldset.

Grouping radios

You should often group up radios and checkboxes with a fieldset.

When grouping radio groups it is recommended to use the role="radiogroup" attribute on the fieldset for improved accessibility.

Normally for groups of radios it makes more sense to use flix-fieldset__info for info messages.

Your favorite Ramen taste?
Please chose one 
<fieldset class="flix-fieldset" role="radiogroup">
  <legend class="flix-legend">Your favorite Ramen taste?</legend>
  <div class="flix-fieldset__item">
    <div class="flix-radio">
      <input class="flix-radio__input" aria-describedby="example-radio-info" type="radio" name="example-radio" id="shio" value="Shio"/>
      <label class="flix-radio__label" for="shio">Shio</label>
    </div>
  </div>
  <div class="flix-fieldset__item">
    <div class="flix-radio">
      <input class="flix-radio__input" aria-describedby="example-radio-info" type="radio" name="example-radio" id="shoyu" checked="" value="Shoyu"/>
      <label class="flix-radio__label" for="shoyu">Shoyu</label>
    </div>
  </div>
  <div class="flix-fieldset__item">
    <div class="flix-radio">
      <input class="flix-radio__input" aria-describedby="example-radio-info" type="radio" name="example-radio" id="miso" value="Miso"/>
      <label class="flix-radio__label" for="miso">Miso</label>
    </div>
  </div>
  <div class="flix-fieldset__item">
    <div class="flix-radio">
      <input class="flix-radio__input" aria-describedby="example-radio-info" type="radio" name="example-radio" id="tonkotsu" value="Tonkotsu"/>
      <label class="flix-radio__label" for="tonkotsu">Tonkotsu</label>
    </div>
  </div>
  <span class="flix-fieldset__info" id="example-radio-info">Please chose one</span>
</fieldset>

Error state and horizontal layout

Fieldsets can have an --error modifier, that will make the first info message with danger color, so that should be used for your error message.

Individual inputs can have their own "validation" modifiers.

To show the fieldset items side by side use the --horizontal modifier on the fieldset component.

Passenger details
All fields are required 
<fieldset class="flix-fieldset flix-fieldset--error">
  <legend class="flix-legend">Passenger details</legend>
  <div class="flix-fieldset__item">
    <div class="flix-input">
      <label class="flix-label flix-input__label" for="first-name">
        First name
      </label>
      <div class="flix-input__container">
        <input type="text" id="first-name" class="flix-input__field"/>
      </div>
    </div>
  </div>
  <div class="flix-fieldset__item">
    <div class="flix-input flix-input--error">
      <label class="flix-label flix-input__label" for="last-name">
        Last name
      </label>
      <div class="flix-input__container">
        <input type="text" id="last-name" class="flix-input__field" aria-invalid="true" aria-errormessage="example-user-error"/>
        <span class="flix-input__feedback-icon" aria-hidden="true"></span>
      </div>
    </div>
  </div>
  <span class="flix-fieldset__info" id="example-user-error" aria-live="assertive">All fields are required</span>
</fieldset>

A few things to keep in mind when working with error states:

  • Add appropriate --error modifiers to your fieldset and form elements to enable error visual appearance;
  • Add aria-invalid to the inputs to inform assistive technologies that an error occurred;
  • Finally, connect any error messages with the invalid inputs using an id and aria-errormessage;
  • Add aria-live="assertive" to error messages to inform assistive technologies to read the error right away;

Custom item space

You can use --space modifiers in the item elements in order to customize the space between the items.

All space options that are available for the space helpers are also available for fieldset item modifiers.

Simply add --space-<number> where number is a space name, the fieldset component will take care of the space direction depending if it's vertical or horizontal layout.

Small radios 
<fieldset class="flix-fieldset flix-fieldset--horizontal" role="radiogroup">
  <legend class="flix-legend">Small radios</legend>
  <div class="flix-fieldset__item">
      <div class="flix-radio flix-radio--sm">
          <input class="flix-radio__input" type="radio" name="example-small" id="small-yes" value="Yes"/>
          <label class="flix-radio__label" for="small-yes">Yes!</label>
      </div>
  </div>
  <div class="flix-fieldset__item flix-fieldset__item--space-half">
      <div class="flix-radio flix-radio--sm">
          <input class="flix-radio__input" type="radio" name="example-small" id="small-please" checked="" value="Please"/>
          <label class="flix-radio__label" for="small-please">Please!</label>
      </div>
  </div>
</fieldset>