USWDS components are simple and consistent solutions to common user interface needs.
Find a USWDS component
See the packages section to learn about 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.
The banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both 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.
Three text fields are the easiest way for users to enter most dates.
A date picker helps users select a single date.
A date range picker helps users select a range between two dates.
A dropdown allow users to select one option from a temporary modal menu.
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 provide 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.
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.
A link connects users to a different page or further information.
A list organizes information into discrete sequential sections.
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
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.