Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search
  • Search
Social Summary box

Search (search)

Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation.

🔗 External documentation.

ID Label Description Schema
label Label Label value.
search_id Search field idea Value for the 'id' attribute, for accessibility. Keep to one word. 
                        type: string

                      
            id: search
label: Search
description: 'Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation.'
group: Search
homepage: 'https://designsystem.digital.gov/components/search/'
variants:
    default:
        id: default
        label: Default
    big:
        id: big
        label: Big
        description: 'Search component with increased padding and font-size.'
    small:
        id: small
        label: Small
        description: 'A compact variation of the search. Uses a magnifying glass icon for the submit button.'
slots:
    label:
        id: label
        label: Label
        description: 'Label value.'
props:
    search_id:
        id: search_id
        label: 'Search field idea'
        description: "Value for the 'id' attribute, for accessibility. Keep to one word."
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': search
            search_id: test-search-field

Default ( default )

<form class="usa-search"> <div role="search"> <!-- [Error] component: label, template not found: label --> <input class="usa-input" id="test-search-field" type="search" name="search" /> <button class="usa-button" type="submit"> <span class="usa-search__submit-text">Search</span> <img src="" class="usa-search__submit-icon" alt="Search"> </button> </div> </form>

Big ( big )

Search component with increased padding and font-size.
<form class="usa-search--big usa-search"> <div role="search"> <!-- [Error] component: label, template not found: label --> <input class="usa-input" id="test-search-field" type="search" name="search" /> <button class="usa-button" type="submit"> <span class="usa-search__submit-text">Search</span> <img src="" class="usa-search__submit-icon" alt="Search"> </button> </div> </form>

Small ( small )

A compact variation of the search. Uses a magnifying glass icon for the submit button.
<form class="usa-search--small usa-search"> <div role="search"> <!-- [Error] component: label, template not found: label --> <input class="usa-input" id="test-search-field" type="search" name="search" /> <button class="usa-button" type="submit"> <img src="" class="usa-search__submit-icon" alt="Search"> </button> </div> </form>