Search

A search form component with a text input and submit button. Supports default, big, and small size variants. Follows USWDS search patterns.

Props

Prop	Default	Description
`id`		ID applied to the search input; also used as the `name` attribute on the input
`search_type`		Size variant: leave empty for the default size, `"big"` for large, `"small"` for compact

Example Usage

Default Search

<c-search id="search-field" />

Big Search

<c-search search_type="big" id="search-field-big" />

Small Search

<c-search search_type="small" id="search-field-small" />

Usage Notes

The small variant (search_type="small") hides the "Search" button label, showing only the search icon
The id prop is used for both the input id and name attributes, and for the <label> for attribute (the label is visually hidden via usa-sr-only)
Wrap c-search in a <header> or landmark region so screen reader users can find it easily

{% load cotton %}

<div class="component-variants">
    <h1>Search Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        {% cotton search search_type="{{ variant.search_type }}" id="{{ variant.id }}" %}{% endcotton %}
    </div>
    {% endfor %}
</div>

name: Search
context:
  variants:            
    - title: "Default"
      search_type: ""
      id: "search-field"
    - title: "Big"
      search_type: "big"
      id: "search-field-big"
    - title: "Small"
      search_type: "small"
      id: "search-field-small"