Search & Filter Form

Search and filter forms can use a variety of form inputs along with responsive grid classes. The example below combines a search field, multiple select dropdowns arranged in a responsive grid, and a submit button.

Example

<form
  class="util-background-light-gray util-pad-all-sm util-pad-all-md@sm util-pad-all-lg@md"
>
  <fieldset>
    <legend
      class="cmp-heading-4 util-margin-bottom-sm util-text-center util-full-width"
    >
      Search Filter Title
    </legend>
    <div class="cmp-form-field">
      <label for="search-field" class="cmp-form-label">Search</label>
      <div>
        <div class="util-position-relative">
          <input
            id="search-field"
            class="cmp-form-field__input"
            type="search"
            placeholder="Search Degrees & Certificates"
          />
        </div>
      </div>
    </div>
    <p
      class="cmp-paragraph util-margin-vert-none util-color-dark-gray util-text-italic"
    >
      Searches are NOT case sensitive, and boolean searching is supported.
    </p>
    <div class="obj-grid obj-grid--gap-md@sm util-margin-vert-lg">
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="subject-select" class="cmp-form-label">Subject</label>
          <div class>
            <select
              id="subject-select"
              class="cmp-form-select__dropdown"
              name="Search and Filter"
            >
              <option value="1">All Subjects</option>
              <option value="2">Education</option>
              <option value="3">Business</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="colleges-select" class="cmp-form-label">Colleges</label>
          <div class>
            <select
              id="colleges-select"
              class="cmp-form-select__dropdown"
              name="Search and Filter"
            >
              <option value="1">All Colleges</option>
              <option value="2">College of Education</option>
              <option value="3">College of Engineering</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="degree-select" class="cmp-form-label">Degree Level</label>
          <div class>
            <select
              id="degree-select"
              class="cmp-form-select__dropdown"
              name="Search and Filter"
            >
              <option value="1">Any</option>
              <option value="2">Undergraduate</option>
              <option value="3">Graduate</option>
              <option value="4">Post Baccalaureate</option>
            </select>
          </div>
        </div>
      </div>
      <div class="obj-grid__full obj-grid__half@sm obj-grid__quarter@md">
        <div class="cmp-form-select">
          <label for="degree-type-select" class="cmp-form-label">
            Degree Type
          </label>
          <div class>
            <select
              id="degree-type-select"
              class="cmp-form-select__dropdown"
              name="Search and Filter"
            >
              <option value="1">Any</option>
              <option value="2">Certificate</option>
              <option value="3">Degree</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="obj-grid obj-grid--gap-md@sm">
    <div class="obj-grid__full obj-grid__quarter@md">
      <button class="cmp-button cmp-button--full-width" type="submit">
        Search
      </button>
    </div>
  </div>
</form>

Structure

The form is built from several design system components:

Component	Class	Purpose
Heading	`.cmp-heading-4`	Form title via `<legend>`
Text Input	`.cmp-form-field__input`	Search input field
Label	`.cmp-form-label`	Labels for inputs and selects
Select	`.cmp-form-select__dropdown`	Dropdown filter menus
Button	`.cmp-button`	Submit button
Grid	`.obj-grid`, `.obj-grid__quarter@md`	Responsive layout for filters

Layout

The form uses responsive grid classes to arrange the filter dropdowns:

Small screens: Each filter is full width and stacked vertically
@sm breakpoint: Filters arrange into two columns (.obj-grid__half@sm)
@md breakpoint: Filters arrange into four equal columns (.obj-grid__quarter@md)

The submit button is constrained to one quarter width at @md and up via .obj-grid__quarter@md.

Accessibility

The <fieldset> and <legend> group all inputs under a single accessible label for the form section.
Every <input> and <select> must have an associated <label> with a matching for/id pair.
The search input uses type="search" so assistive technology can identify its purpose.
Required fields should include the required attribute and a visual indicator.
When validation errors occur, use aria-invalid="true" and aria-describedby pointing to the error message.
The submit button uses a <button type="submit"> element so it is keyboard-activatable and announced correctly.

Notes

The form uses util-display-none@print in production to hide it in print layouts.
The helper text paragraph uses .cmp-paragraph to retain base typography alongside utility classes.