Location Search

Search by county to find nearby Texas office locations. Horizontal and vertical layouts.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Title, combobox, search button
Optional	Body text

Note: Combobox with county or ZIP code suggestions.

Horizontal Layout

Find Texas Office locations

To find information specific to your region, select your county.

Select your county:

View HTML

<div class="txds-location-search txds-location-search--horizontal">
  <div class="txds-location-search__bar"></div>
  <div class="txds-location-search__inner">
    <div class="txds-location-search__graphic">
      <img src="/assets/images/texas-map.svg" alt="Texas state outline map">
    </div>
    <div class="txds-location-search__divider"></div>
    <div class="txds-location-search__content">
      <div>
        <h3 class="txds-location-search__heading">Find Texas Office locations</h3>
        <p class="txds-location-search__text">To find information specific to your region, select your county.</p>
      </div>
      <div class="txds-location-search__field">
        <label class="txds-location-search__label" for="loc-county">Select your county:</label>
        <input class="txds-location-search__combobox" id="loc-county" type="text" placeholder="- Select -" role="combobox" aria-expanded="false" aria-autocomplete="list" list="loc-county-options" autocomplete="off">
        <datalist id="loc-county-options">
          <option value="Travis"></option>
          <option value="Harris"></option>
          <option value="Dallas"></option>
          <option value="Bexar"></option>
          <option value="Tarrant"></option>
        </datalist>
      </div>
      <button class="txds-location-search__button" type="button">Find my office</button>
    </div>
  </div>
</div>

Vertical Layout

Find Texas Office locations

To find information specific to your region, select your county.

Select your county:

View HTML

<div class="txds-location-search txds-location-search--vertical">
  <div class="txds-location-search__bar"></div>
  <div class="txds-location-search__inner">
    <div class="txds-location-search__graphic">
      <img src="/assets/images/texas-map.svg" alt="Texas state outline map">
    </div>
    <div class="txds-location-search__content">
      <div>
        <h3 class="txds-location-search__heading">Find Texas Office locations</h3>
        <p class="txds-location-search__text">To find information specific to your region, select your county.</p>
      </div>
      <div class="txds-location-search__field">
        <label class="txds-location-search__label" for="loc-county-v">Select your county:</label>
        <input class="txds-location-search__combobox" id="loc-county-v" type="text" placeholder="- Select -" role="combobox" aria-expanded="false" aria-autocomplete="list" list="loc-county-options-v" autocomplete="off">
        <datalist id="loc-county-options-v">
          <option value="Travis"></option>
          <option value="Harris"></option>
          <option value="Dallas"></option>
          <option value="Bexar"></option>
        </datalist>
      </div>
      <button class="txds-location-search__button" type="button">Find my office</button>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-location-search`	Base card container.
`txds-location-search--horizontal`	Wide layout with Texas graphic, divider, and search side-by-side.
`txds-location-search--vertical`	Narrow/sidebar layout stacked vertically.
`txds-location-search__bar`	Primary-60 accent bar at top.
`txds-location-search__inner`	Inner flex container for layout.
`txds-location-search__graphic`	Texas map illustration.
`txds-location-search__divider`	Vertical divider line (horizontal layout only).
`txds-location-search__content`	Content area with heading, text, dropdown, and button.
`txds-location-search__heading`	Card heading.
`txds-location-search__text`	Optional description text.
`txds-location-search__field`	Label + combobox wrapper.
`txds-location-search__label`	Form field label.
`txds-location-search__combobox`	Combobox input with county suggestions.
`txds-location-search__button`	Blue primary search button.