{{#freestyle-usage "search-box" title="Search Box"}}
  {{search-box
    searchTerm=(mut searchTerm1)
    placeholder="Search things..."}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
  <p>The search box component is a thin wrapper around a simple input. Although the searchTerm passed to it is a mutable reference, internally search term is debounced. This is to prevent potentially expensive code that depends on searchTerm from recomputing many times as a user types.</p>
  <p>There is no form of the search box component that defers updating the searchTerm reference until the user manually clicks a "Search" button. This can be achieved by placing a button next to the search bar component and using it to perform search, but search should be automatic whenever possible.</p>
{{/freestyle-annotation}}

{{#freestyle-usage "search-box-compact" title="Search Box Compact"}}
  {{search-box
    searchTerm=(mut searchTerm2)
    placeholder="Search things..."
    inputClass="is-compact"}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
  <p>Search box provides an inputClass property to control the inner input. This is nice for fitting the search box into smaller spaces, such as boxed-section heads.</p>
{{/freestyle-annotation}}