Search Dialog

The search dialog provides a fullscreen dialog which presents space for stylized search boxes.

Examples and Code

Select exampleDefault

Open Full Example

<button class="uoheader__search__button" id="uoheader__search__button" name="Search" aria-label="Search"
  aria-expanded="false" aria-haspopup="true">Search</button>
<dialog class="uowdf-search-dialog uowdf-search-dialog--active" open="">
  <button class="uowdf-search-dialog__close" id="seach-close-button" aria-label="Close Search"></button>
  <div class="uowdf-search-dialog__search-region" role="search">
    <div class="views-exposed-form settings-tray-editable block block-views block-views-exposed-filter-blocksearch-block-cosmic-search" data-drupal-selector="views-exposed-form-search-block-cosmic-search" id="block-exposedformsearchblock-cosmic-search" data-drupal-settingstray="editable">
      <h2>Search this site</h2>
      <form action="/search" method="get" id="views-exposed-form-search-block-cosmic-search" accept-charset="UTF-8">
        <div class="form--inline clearfix">
          <div
            class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-search-api-fulltext form-item-search-api-fulltext form-no-label">
            <input data-drupal-selector="edit-search-api-fulltext" type="text" id="edit-search-api-fulltext"
              name="search_api_fulltext" value="" size="30" maxlength="128" class="form-text">
          </div>
          <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
            <input data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Search"
              class="button js-form-submit form-submit">
          </div>
        </div>
      </form>
    </div>
  </div>
</dialog>

Guidance

Usage Guidance

• Use for the main site search
• Don’t use for in-page search

Elements

Element	Description	Usage	Required	Multiple
Button	The button to open the search dialog	Use in your utility menu near the mobile navigation button	Yes	No
Dialog	The fullscreen search dialog	Use to contain the search boxes	Yes	No
Form	The search input field	Use to present the search box itselft	Yes	Yes