Search

Search banner with heading and search input. Dark and light themes.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Heading, search bar
Optional	Trending links
Properties	Dark/light theme, mobile/desktop, filled/unfilled states

Search Bar — Dark Theme States

Inactive

Active

View HTML

<div style="display:flex;flex-direction:column;gap:32px;max-width:736px;">
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Inactive</p>
    <div class="txds-search-hero__bar">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </span>
        <input type="search" class="txds-search-hero__input" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
  </div>
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Active</p>
    <div class="txds-search-hero__bar txds-search-hero__bar--filled">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </span>
        <input type="search" class="txds-search-hero__input" value="Services" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
  </div>
</div>

Search Bar — Light Theme States

Inactive

Active

View HTML

<div style="display:flex;flex-direction:column;gap:32px;max-width:736px;">
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Inactive</p>
    <div class="txds-search-hero__bar txds-search-hero__bar--light">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </span>
        <input type="search" class="txds-search-hero__input" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
  </div>
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Active</p>
    <div class="txds-search-hero__bar txds-search-hero__bar--light txds-search-hero__bar--filled">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </span>
        <input type="search" class="txds-search-hero__input" value="Services" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
  </div>
</div>

Search Bar — Mobile States

Inactive

Active

View HTML

<div style="display:flex;flex-direction:column;gap:32px;width:375px;">
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Inactive</p>
    <div class="txds-search-hero--mobile" style="padding:0;max-width:100%;background:none;">
      <div class="txds-search-hero__bar">
        <div class="txds-search-hero__input-wrap">
          <span class="txds-search-hero__search-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </span>
          <input type="search" class="txds-search-hero__input" aria-label="Search">
        </div>
        <button type="submit" class="txds-search-hero__button">Search</button>
      </div>
    </div>
  </div>
  <div>
    <p style="font-size:14px;font-weight:600;color:#666;margin:0 0 8px;">Active</p>
    <div class="txds-search-hero--mobile" style="padding:0;max-width:100%;background:none;">
      <div class="txds-search-hero__bar txds-search-hero__bar--filled">
        <div class="txds-search-hero__input-wrap">
          <span class="txds-search-hero__search-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </span>
          <input type="search" class="txds-search-hero__input" value="Services" aria-label="Search">
        </div>
        <button type="submit" class="txds-search-hero__button">Search</button>
      </div>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-search-hero`	Dark primary-60 container with centered content.
`txds-search-hero__heading`	H2/H3 heading (Bold, center-aligned, light text).
`txds-search-hero__bar`	Flex row containing input wrapper and button.
`txds-search-hero__input-wrap`	Wrapper around the search icon and text input with light background.
`txds-search-hero__search-icon`	24×24 magnifying glass icon inside the input area.
`txds-search-hero__input`	Text input inside the wrapper.
`txds-search-hero__button`	Gold (secondary-50) search submit button.
`txds-search-hero__trending`	Row of trending keyword links beneath the search bar.
`txds-search-hero__trending-label`	"Trending:" label text.
`txds-search-hero__bar--light`	Bordered input variant for use on light backgrounds.
`txds-search-hero__bar--filled`	Filled state with bold button text and optional shadow.
`txds-search-hero--mobile`	Forces mobile layout at any viewport width (smaller padding, stacked trending).