Components

USWDS components are simple and consistent solutions to common user-interface needs.

Find a USWDS component

Filter by name and keyword

47 components found

See the packages section to learn how to import only the components your project needs.

An accordion is a list of headers that hide or reveal additional content when selected.

An alert keeps users informed of important and sometimes time-sensitive changes.

Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

A button group collects similar or related actions.

A button draws attention to important actions with a large selectable surface.

Cards contain content and actions about a single subject.

Character count helps users know how much text they can enter when there is a limit on the number of characters.

Checkboxes allow users to select one or more options from a list.

A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source.

A combo box helps users select an item from a large list of options.

Data visualizations help communicate patterns and relationships in a data set.

A date picker helps users select a single date.

A date range picker helps users select a range between two dates.

File input allows users to attach one or multiple files.

A footer serves site visitors who arrive at the bottom of a page without finding what they want.

A form allows users to enter information into a page.

A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

An icon list reinforces the meaning and visibility of individual list items with a leading icon.

Icons help communicate meaning, actions, status, or feedback.

The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.

The in-page navigation allows navigation to specific sections on a lengthy content page

An input mask is a string expression that constrains input to support valid input values.

Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.

The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.

A link connects users to a different page or further information.

A list organizes information into discrete sequential sections.

A select for month followed by two text fields is the easiest way for users to enter most dates.

A modal disables page content and focuses the user’s attention on a single task or message.

Pagination is navigation for paginated content.

A process list displays the steps or stages of important instructions or processes.

Format a block of running text.

Radio buttons allow users to select exactly one choice from a group.

A range slider allows users to choose an approximate number from a range.

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

A select component allows users to choose one option from a temporary modal menu.

Hierarchical, vertical navigation to place at the side of a page.

A site alert communicates urgent sitewide information.

A step indicator updates users on their progress through a multi-step process.

A summary box highlights key information from a longer page or displays next steps.

A table shows information in columns and rows.

A tag draws attention to new or categorized content elements.

A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.

A time picker helps users select a specific time.

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Our default typefaces are designed for legibility and can adapt to a variety of visual tones.

Stating validation requirements up front, with live feedback, means users won’t be left guessing.