Form Layout

The design system currently supports three form styles:

Form Container

Form inputs should never expand 4 columns on viewports greater than 768px (bootstrap -md size).

Spacing

Bootstrap 5 provides no default styling for the <form> element. We recommend using the Stack component to create the correct spacing between form elements.

Our design system has a set of guidelines to keep spacing consistent across all forms in the Mosaic design system. Developers are expected to follow these standards whenever creating forms across ICPSR products.

Spacing between form headers and input fields is 1.5rem/24px/$spacer-lg. Use the .stack component with its default spacing. (Default spacing is equal to .stack-4.)
Spacing between “atoms” or elements within an input field is .5rem/8px/$spacer-sm. Use the .stack component with .stack-2 spacing. However, labels and inputs should have the correct spacing between them inherently.

Note: The UX Engineering and Development teams are working on componentizing our forms into React components so that mark up and spacing implementation will be abstracted. This way developers can focus on functionality and implementation, not on styling.

Grid Layout

Bootstrap applies display: block to all form controls so they will stack vertically by default. There may be some cases, however, where you will want form elements to sit next to each other with Bootstrap 5's Form grid.

Simple row and col classes can be used to make form elements share the same horizontal space.

Use `row` and `col` classes to keep form elements in-line

aria-label is used to provide the select element with a label.

Select two variables to compare

First Variable

Second Variable

<fieldset>
  <legend>Select two variables to compare</legend>
  <div class="row">
    <div class="col">
      <label class="form-label" for="variable-dropdown-1">First Variable</label>
      <select
        class="form-select"
        id="variable-dropdown-1"
        name="variable-dropdown-1">
        <option value="1">Variable One</option>
        <option value="2">Variable Two</option>
        <option value="3">Variable Three</option>
      </select>
    </div>
    <div class="col">
      <label class="form-label" for="variable-dropdown-2"
        >Second Variable</label
      >
      <select
        class="form-select"
        id="variable-dropdown-2"
        name="variable-dropdown-2">
        <option value="1">Variable One</option>
        <option value="2">Variable Two</option>
        <option value="3">Variable Three</option>
      </select>
    </div>
  </div>
</fieldset>

Hide

Benefactor Information

Select the type of benefactor from the dropdown and enter the name in the text box

Select Benefactor Type

Benefactor Name

<fieldset>
  <legend>Benefactor Information</legend>
  <p class="help-text" id="helpBenefactor">
    Select the type of benefactor from the dropdown and enter the name in the
    text box
  </p>
  <div class="row">
    <div class="col-4">
      <label class="form-label" for="benefactor-dropdown-1"
        >Select Benefactor Type</label
      >
      <select
        class="form-select"
        id="benefactor-dropdown-1"
        name="benefactor-dropdown-1"
        aria-describedby="helpBenefactor">
        <option value="1">Individual</option>
        <option value="2">Institution</option>
        <option value="3">Organization</option>
      </select>
    </div>
    <div class="col-8">
      <label class="form-label" for="benefactor-name">Benefactor Name</label>
      <input class="form-control" id="benefactor-name" type="text" />
    </div>
  </div>
</fieldset>

Hide

Fieldsets

When creating forms it may desireable to provide a visual indicator for fieldsets to ease the cognitive load on users. These section headers should be added to high level field sets and are not intended for deeply nested fieldsets that do not require a header.

Form with Fieldset Headers

Notice that each high level fieldset contains a header. Use class name .header-bg to apply background-color, font (size, family & weight), margin and padding to headers. Nested fieldsets for <radio> and <checkbox> elements do not have headers.

ICPSR Cat

All fields with (*) are required fields.

Basic Information

Cat Name*

Cat Description*

Favorite Toys

Select two toys for your cat to play with

Communication

Preferred mode of communication*

Pets
Cuddles

Would you like to receive notifications when your cat gets grumpy?*

Yes

<form class="stack">
  <div>
    <h1>ICPSR Cat</h1>
    <p>
      All fields with (<span class="text-danger">*</span>) are required fields.
    </p>
  </div>

  <fieldset class="stack stack-3">
    <legend class="header-bg">
      <i class="fa-solid fa-cat"></i>Basic Information
    </legend>

    <div>
      <label class="form-label" for="catName"
        >Cat Name<span class="text-danger">*</span>
      </label>
      <input
        class="form-control"
        id="catName"
        name="catName"
        type="text"
        value="ICPSR Staff"
        aria-label="catName" />
    </div>

    <div>
      <label class="form-label" for="catDescription"
        >Cat Description<span class="text-danger">*</span> </label
      ><textarea
        class="form-control"
        id="catDescription"
        name="catDescription"
        aria-label="catDescription"></textarea>
    </div>
  </fieldset>

  <fieldset class="stack stack-3">
    <legend class="header-bg">
      <i class="fa-solid fa-teddy-bear"></i>Favorite Toys
    </legend>

    <fieldset>
      <legend>
        <span>Select two toys for your cat to play with</span>
      </legend>
      <div class="row">
        <div class="col-12 col-sm-6 mb-3 mb-sm-0">
          <!-- <label class="mb-1" for="variable-dropdown-1">First Variable</label> -->
          <select
            class="form-select"
            id="variable-dropdown-1"
            name="variable-dropdown-1"
            aria-label="Select first variable">
            <option value="1">cat nip</option>
            <option value="2">ball of yarn</option>
            <option value="3">stuffed fish toy</option>
          </select>
        </div>
        <div class="col-12 col-sm-6">
          <!-- <label class="mb-1" for="variable-dropdown-2">Second Variable</label> -->
          <select
            class="form-select"
            id="variable-dropdown-2"
            name="variable-dropdown-2"
            aria-label="Select second variable">
            <option value="1">cat nip</option>
            <option value="2">ball of yarn</option>
            <option value="3">stuffed fish toy</option>
          </select>
        </div>
      </div>
    </fieldset>
  </fieldset>

  <fieldset class="stack stack-3">
    <legend class="header-bg">
      <i class="fa-solid fa-phone"></i>Communication
    </legend>

    <fieldset class="mode-radio">
      <legend>
        Preferred mode of communication<span class="text-danger">*</span>
      </legend>
      <div class="form-check">
        <input
          class="form-check-input"
          id="mode-text-message6045"
          name="mode"
          type="radio" />
        <label for="pets-message6045">Pets</label><br />
        <input
          class="form-check-input"
          id="cuddles-6045"
          name="mode"
          type="radio" />
        <label for="cuddles-6045">Cuddles</label>
      </div>
    </fieldset>

    <fieldset>
      <legend>
        Would you like to receive notifications when your cat gets grumpy?<span
          class="text-danger"
          >*</span
        >
      </legend>
      <div class="form-check">
        <input
          class="form-check-input"
          id="yes"
          type="checkbox"
          aria-required="true" />
        <label class="form-check-label" for="yes">Yes</label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          id="no"
          type="checkbox"
          aria-required="true" />
        <label class="form-check-label" for="no">No</label>
      </div>
    </fieldset>
  </fieldset>
</form>

Hide

Form Layout

Form Container

Spacing

Grid Layout

Sample Code

Sample Code

Fieldsets

ICPSR Cat

Sample Code