Search

Arizona Bootstrap Experimental Feature

On this page

The AZ Search component provides a stylized search field built with Bootstrap form controls and input groups. It is intended to be reusable in AZ Navbar Fullscreen and other page regions where a prominent site search is needed.

Example

html

<div class="bg-blue">
  <form class="az-search" role="search">
    <label class="visually-hidden" for="az-search-example">Search</label>
    <div class="input-group">
      <input id="az-search-example" class="form-control" type="search" placeholder="Search" aria-label="Search">
      <button class="btn" type="submit" aria-label="Submit search">
        <span class="az-search-icon" aria-hidden="true"></span>
      </button>
    </div>
  </form>
</div>

Accessibility

Keep a programmatic label by including either a visible label or a .visually-hidden label.
Keep descriptive aria-label text on icon-only submit or mobile toggle buttons.
Use type="search" for proper browser semantics and platform affordances.
The component includes :focus-visible styles on search controls to improve keyboard focus visibility.

CSS Variables

The following properties are set and used on the .az-search component:

custom/_search.scss

--az-search-width: 265px;
--az-search-height: 43px;
--az-search-padding-y: 5px;
--az-search-padding-x: 15px;
--az-search-btn-padding: 9px;
--az-search-input-padding: 6px 12px 6px 12px;
--az-search-icon-size: 24px;
--az-search-color: var(--bs-white);
--az-search-border-width: 2px;
--az-search-border-color: var(--az-search-color);
--az-search-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='43.535' height='43.535' viewBox='0 0 43.535 43.535' fill='none'><ellipse cx='17.972' cy='17.831' rx='15.472' ry='15.331' stroke='#{$white}' stroke-width='5'/><line x1='31' y1='31' x2='40' y2='40' stroke='#{$white}' stroke-width='5' stroke-linecap='round'/></svg>"))};
--az-search-icon-hover: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='43.535' height='43.535' viewBox='0 0 43.535 43.535' fill='none'><ellipse cx='17.972' cy='17.831' rx='15.472' ry='15.331' stroke='#{$sky}' stroke-width='5'/><line x1='31' y1='31' x2='40' y2='40' stroke='#{$sky}' stroke-width='5' stroke-linecap='round'/></svg>"))};
--az-search-font: normal normal normal 16px/22px proxima-nova;
--az-search-focus-ring-color: var(--bs-sky);
--az-search-focus-ring-width: 1px;
--bs-border-radius: 8px;