Search Input

The Search Input mimics other Text Input states—especially in regards to Active, Focused, Placeholder text, and other styled attributes.

<search class="search-basic input-group" role="search">
  <input
    type="text"
    placeholder="Search by ID, PI name, etc"
    class="form-control"
    aria-label="Enter keywords and click submit to search ICPSR for data"
    aria-describedby="basic-search"
  />
  <button type="submit" class="btn" id="basic-search"
    ><i class="fas fa-search"></i><span class="visually-hidden"
      >Search</span
    ></button
  >
</search>

<search class="search-input input-group" role="search">
  <input
    type="text"
    placeholder="Search by ID, PI name, etc"
    class="form-control border-primary"
    aria-label="Enter keywords and click submit to search ICPSR for data"
    aria-describedby="button-addon2"
  />
  <button type="submit" class="btn btn-primary" id="button-addon2"
    ><i class="fas fa-search"></i><span class="visually-hidden"
      >Search</span
    ></button
  >
</search>

<search class="search-input" role="search">
  <select
    class="form-select"
    id="inputGroupSelect01"
    name="search options"
    aria-label="Options to search by">
    <option selected>Search by</option>
    <option value="1">All</option>
    <option value="2">Project title</option>
    <option value="3">Project ID</option>
    <option value="4">The longest project term in the list</option>
  </select>
  <div class="input-group">
    <input
      class="form-control"
      type="text"
      aria-label="Select Enter keywords and click submit to search ICPSR for data"
      aria-describedby="button-addon2"
      placeholder="Search by ID, PI name, etc" />
    <button class="btn btn-primary" id="button-addon2" type="submit">
      <i class="fas fa-search"></i><span class="visually-hidden">Search</span>
    </button>
  </div>
</search>
`
	}

When icons are used as links, or buttons like in the Search Input example above, there must be descriptive text inside the link for the sake of screen reader accessibility. Bootstrap uses a class called "visually-hidden" that allows you to include descriptive text that is read by screen readers but does not appear on the screen.

The <search> element is the newest to HTML. For backwards compatibility, add a role="search" attribute to make sure browsers understand it correctly.

// Font Awesome chevron, escaped for data-uri with Bootstrap function
--#{$prefix}form-select-bg-img: #{escape-svg(
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{$primary}' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E")
)};