Design System

Search

Allow users to search for content by entering keywords.

Variations

Default Search

open this example in its own window 

<form class="search-component" action="#">
  <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <div class="input-group">
      <input
        type="text"
        class="form-control"
        placeholder="Search"
        value=""
        aria-label="Search"
      />
      <button type="button" class="btn-close" aria-label="Close" disabled>
        <span class="visually-hidden">Close</span>
      </button>
      <button type="submit" class="btn btn-btn-outline-secondary">
        <span class="visually-hidden">Search</span>
        <i class="fas fa-search" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</form>

Options to the search() macro

action: string

The form's action href.

large: boolean = false

Whether to display a large Search component.

{% from 'macros/component/search.html' import search %}

{{ search({
    'action': '#'
}) }}

Large Search

open this example in its own window 

<form class="search-component" action="#">
  <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <div class="input-group input-group-lg">
      <input
        type="text"
        class="form-control"
        placeholder="Search"
        value=""
        aria-label="Search"
      />
      <button type="button" class="btn-close" aria-label="Close" disabled>
        <span class="visually-hidden">Close</span>
      </button>
      <button type="submit" class="btn btn-btn-outline-secondary">
        <span class="visually-hidden">Search</span>
        <i class="fas fa-search" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</form>

Options to the search() macro

action: string

The form's action href.

large: boolean = false

Whether to display a large Search component.

{% from 'macros/component/search.html' import search %}

{{ search({
    'action': '#',
    'large': true
}) }}