Form Search

Ready

HTML
View
Context
Notes


        
        <form class="form">
    <fieldset>
        <legend class="h3">Search Input Example</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="search-sample">Enter Search Term</label>
                    <input type="search" id="search-sample" name="search-sample">
                    <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
                    <!-- /.search__btn -->
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
    <fieldset>
        <legend class="h3">Select State Examples (FPO)</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="search-hover-sample">Hover State</label>
                    <input type="search" class="hovered" id="search-hover-sample" name="search-hover-sample">
                    <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
                    <!-- /.search__btn -->
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="search-focus-sample">Focus State</label>
                    <input type="search" class="focused" id="search-focus-sample" name="search-focus-sample">
                    <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
                    <!-- /.search__btn -->
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="search-disabled-sample">Disabled State</label>
                    <input type="search" id="search-disabled-sample" name="search-disabled-sample" disabled>
                    <button type="submit" class="search__btn" aria-label="Search" disabled>
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
                    <!-- /.search__btn -->
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper has-error">
                    <label for="search-error-sample">Error State</label>
                    <input type="search" id="search-error-sample" name="search-error-sample">
                    <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
                    <!-- /.search__btn -->
                    <p class="input__error-message">This is a sample error message.</p>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
</form>
<!-- /.form -->


        <form class="form">
  <fieldset>
    <legend class="h3">Search Input Example</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="search-sample">Enter Search Term</label>
          <input type="search" id="search-sample" name="search-sample">
          <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
          <!-- /.search__btn -->
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
  <fieldset>
    <legend class="h3">Select State Examples (FPO)</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="search-hover-sample">Hover State</label>
          <input type="search" class="hovered" id="search-hover-sample" name="search-hover-sample">
          <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
          <!-- /.search__btn -->
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="search-focus-sample">Focus State</label>
          <input type="search" class="focused" id="search-focus-sample" name="search-focus-sample">
          <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
          <!-- /.search__btn -->
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="search-disabled-sample">Disabled State</label>
          <input type="search" id="search-disabled-sample" name="search-disabled-sample" disabled>
          <button type="submit" class="search__btn" aria-label="Search" disabled>
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
          <!-- /.search__btn -->
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper has-error">
          <label for="search-error-sample">Error State</label>
          <input type="search" id="search-error-sample" name="search-error-sample">
          <button type="submit" class="search__btn" aria-label="Search">
            <svg class="search__icon" viewBox="0 0 612.01 612.01" role="presentation" aria-hidden="true">
              <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
              l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
              c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
              S377.82,467.8,257.493,467.8z"/>
            </svg>
          </button>
          <!-- /.search__btn -->
          <p class="input__error-message">This is a sample error message.</p>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
</form>
<!-- /.form -->


        
            
            /* No context defined for this component. */

Usage

The search input element allows users to enter terms to search through an application or website. All search input elements should include the following states:

Hover state
Focus state
Disabled state
Error state

Labelling Expectations

All search input elements should be associated with a label.

Focus Expectations

All search input elements should have a visible keyboard focus state.
All search input buttons should have a visible keyboard focus state.

Keyboard Expectations

Tab = Move to next focusable form element

Screen Reader Expectations

When the search input element is focused, screen readers should announce the following:

Search input label
Input type
Search submit button