When to use

  • When the search field can only accept free text keywords

GitHub issues

<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
    <div class="filter js-filter" id="contributor_city-field" data-filter="text" style="border: none;">
        <label class="label" for="contributor_city">City</label>
        <div class="combo combo--filter--mini">
            <input id="contributor_city" type="text" name="contributor_city" class="combo__input" tabindex="0">
            <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
                <span class="u-visually-hidden">Search</span>
            </button>
        </div>
    </div>
    <div class="filter js-filter" id="contributor_employer-field" data-filter="text" style="border: none;">
        <label class="label" for="contributor_employer">Employer</label>
        <div class="combo combo--filter--mini">
            <input id="contributor_employer" type="text" name="contributor_employer" class="combo__input" tabindex="0">
            <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
                <span class="u-visually-hidden">Search</span>
            </button>
        </div>
    </div>
    <div class="filter js-filter" id="contributor_occupation-field" data-filter="text">
        <label class="label" for="contributor_occupation">Occupation</label>
        <div class="combo combo--filter--mini">
            <input id="contributor_occupation" type="text" name="contributor_occupation" class="combo__input" tabindex="0">
            <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
                <span class="u-visually-hidden">Search</span>
            </button>
        </div>
    </div>
</div>
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
  <div class="filter js-filter" id="contributor_city-field" data-filter="text" style="border: none;">
    <label class="label" for="contributor_city">City</label>
    <div class="combo combo--filter--mini">
      <input id="contributor_city" type="text" name="contributor_city" class="combo__input" tabindex="0">
      <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
        <span class="u-visually-hidden">Search</span>
      </button>
    </div>
  </div>
  <div class="filter js-filter" id="contributor_employer-field" data-filter="text" style="border: none;">
    <label class="label" for="contributor_employer">Employer</label>
    <div class="combo combo--filter--mini">
      <input id="contributor_employer" type="text" name="contributor_employer" class="combo__input" tabindex="0">
      <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
        <span class="u-visually-hidden">Search</span>
      </button>
    </div>
  </div>
  <div class="filter js-filter" id="contributor_occupation-field" data-filter="text">
    <label class="label" for="contributor_occupation">Occupation</label>
    <div class="combo combo--filter--mini">
      <input id="contributor_occupation" type="text" name="contributor_occupation" class="combo__input" tabindex="0">
      <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
        <span class="u-visually-hidden">Search</span>
      </button>
    </div>
  </div>
</div>
/* No context defined. */
  • Handle: @free-text-only
  • Preview:
  • Filesystem Path: components/02-components/filters/07-search/03-free-text-only/free-text-only.html