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.
An illustration of a back-to-top button.
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 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 used to concisely convey information and increase visual appearance.
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 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
A tooltip component that 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 NYSDS 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.