Web Components

The NYS Design System includes a library of web components that serve as building blocks to help developers create consistent digital products. Each component page includes examples, guidance, accessibility considerations, and options.

An illustration of an accordion
Accordion
Vertically stacked list of headers that reveal or hide associated content.
An illustration of an alert message.
Alert
An alert displays a prominent message, with optional links, at the top of the screen.
An illustration of an avatar icon.
Avatar
Avatars visually represent a user or entity as initials, a photo, or an icon.
a circular button with the text back to top written on it.
Back To Top
Provides a button that lets users quickly scroll back to the top of the page.
An illustration of a badge.
Badge
Provides a visual indicator of categories.
An illustration of a button.
Button
Used primarily for actions that have an immediate result like "Save", "Close", or "Add".
An illustration of a checkbox.
Checkbox
A checkbox is a form input for users to select options (zero, one, or multiple) from a collection of choices.
An illustration of a divider.
Divider
Separates content and visually divides sections within layouts.
An illustration of a file input.
File Input
Used for selecting and uploading one or more files from the user’s device.
An illustration of a global footer.
Global Footer
Provide users with essential information, secondary navigation, legal links, and contact details across all pages.
An illustration of a global header.
Global Header
Provide users with consistent access to key features, branding, and primary navigation across all pages.
An illustration of an icon.
Icon
Visual symbols are used to concisely convey information and increase visual appearance.
An illustration of a modal.
Modal
Displays content in a dialog that appears over the page and requires user interaction before returning to the main content.
An illustration of a pagination.
Pagination
Enables users to navigate through large sets of content or data divided into smaller, more manageable pages.
An illustration of a radiobutton.
Radio Button
Form input for selecting one option from a group.
An illustration of a select dropdown.
Select
Dropdown menu for selecting a single option.
An illustration of a skip navigation button.
Skip Navigation
An accessibility feature that lets keyboard and screen reader users skip navigation and jump to main content.
An illustration of a stepper dropdown.
Stepper
Displays to users how many steps are in a process and indicates their progress.
An illustration of a textarea field.
Text Area
Field for entering multiple lines of text.
An illustration of a text input field.
Text Input
Field for entering short text strings, like email, number, password, and more.
An illustration of a toggle switch.
Toggle
Switch component for enabling or disabling a setting.
An illustration of a tooltip.
Tooltip
Displays a brief message when hover/focus, offering additional information or context.
An illustration of a unav footer.
UNav Footer
Provide users with access to essential NYS links across all pages.
An illustration of a unav header.
UNav Header
A small NYS-branded header at the top of every page to ensure users they are on a secure NYS site.

Suggest a New Component

Do you have an idea for a new NYS Design System web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.

Edit this page on GitHub (Permissions required)

Last updated: November 25, 2025