Alpha

This is an alpha release of our documentation site. View the roadmap.

Search

On this page

Examples

Default

Open example in a new tab 
<div class="cads-search">
  <input type="search" name="q" id="q" class="cads-search__input cads-input" aria-label="Search through site content" autocomplete="off" />
  <button
    class="cads-search__button"
    type="submit"
    title="Submit search query"
    data-testid="search-form-search-button">
    <span class="cads-search__button-label">Search</span>
  </button>
</div>
<%= render CitizensAdviceComponents::Search.new %>

With value

Open example in a new tab 
<div class="cads-search">
  <input type="search" name="q" id="q" value="Current search term" class="cads-search__input cads-input" aria-label="Search through site content" autocomplete="off" />
  <button
    class="cads-search__button"
    type="submit"
    title="Submit search query"
    data-testid="search-form-search-button">
    <span class="cads-search__button-label">Search</span>
  </button>
</div>
<%= render CitizensAdviceComponents::Search.new(value: "Current search term") %>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render CitizensAdviceComponents::Search.new %>

Component arguments

Argument Description
Argument value Description Optional, current value
Argument param_name Description Optional. Pagination param name, defaults to page