Skip to main content buttons inputs lists tables navigation dialogs pickers layouts cards all Search components accordion-checkbox a checkbox option that reveals an accordion panel when checked accordion-link an accordion link accordion-list an accordion ordered list of list item components accordion-list-item an accordion list item component accordion-nav an accordion navigation area for collapsible accordion information action-bar a contextual action bar that appears when items are selected, showing the selection count and bulk action buttons action-bar-button one action button inside an action bar action-group a group of action buttons that can collapse to an overflow menu when space is constrained action-link a hyperlink styled as an action trigger address-input an input for searching or manually entering an address addressograph-box a box that shows a person's identification details, such as name, tracking information, and salient notations affix a wrapper that pins its content to a viewport position while the page scrolls ai-label an indicator of AI instances that is a pathway to AI explainability alba-community-health-index-input an input for entering Scotland's Community Health Index (CHI) alba-community-health-index-view a read-only display of Scotland's Community Health Index (CHI) alert a status message for important information or feedback alert-dialog a modal dialog for urgent messages requiring user acknowledgment angle-slider-range-input a range input for selecting an angle in degrees announcement-banner a banner highlighting important messages for all users answer an answer is anything that responds to a question, request, action, etc. area-chart an area chart visualization showing sized components in continuous data article-layout a top-level article wrapper that sets CSS custom properties for content column widths aspect-ratio-container a container that maintains a fixed aspect ratio australia-individual-healthcare-identifier-input an input for entering Australia's Individual Healthcare Identifier (IHI) australia-individual-healthcare-identifier-view a read-only display of Australia's Individual Healthcare Identifier (IHI) autosuggest a text input that proposes matching options as users type avatar an avatar indicator that shows an avatar image or avatar text avatar-group a group of avatar components avatar-image an avatar indicator inside image such as a user photo avatar-text an avatar indicator inner text such as a user name back-link a navigation link to return to a previous page badge a small label for counts, statuses, or categories banner a prominent message bar across the top of a page banner-box a banner box that is inside a banner component, using flexbox horizontal bar-chart a horizontal bar chart visualization for displaying data barcode-image a visual machine-readable symbolic code image, such as for a scanner beach-ball a decorative animated beach ball element belgique-numero-de-registre-national-input an input for entering Belgium's Numéro de Registre National / Rijksregisternummer (NRN) belgique-numero-de-registre-national-view a read-only display of Belgium's Numéro de Registre National / Rijksregisternummer (NRN) blockquote a block-level quotation with optional source citation body-text a rendered text block within a content width container breadcrumb-link one breadcrumb link in the trail breadcrumb-list an ordered list of breadcrumb list items breadcrumb-list-item one breadcrumb list item in the trail breadcrumb-nav a navigation container for breadcrumb trail links bulgaria-edinen-grazhdanski-nomer-input an input for entering Bulgaria's Единен граждански номер / Edinen grazhdanski nomer (EGN) bulgaria-edinen-grazhdanski-nomer-view a read-only display of Bulgaria's Единен граждански номер / Edinen grazhdanski nomer (EGN) button a generic clickable button element button-group a wrapper that groups related buttons together button-input an input element of type button for form actions <input type="button"> byline an author attribution with publish and update timestamps calendar-range-picker a picker for selecting a date range on a calendar calendar-table a calendar table interactive grid for managing dates, days, etc. <table> calendar-table-body a calendar table interactive grid tbody for managing dates, days, etc. <tbody> calendar-table-foot a calendar table interactive grid tfoot for managing dates, days, etc. <tfoot> calendar-table-head a calendar table interactive grid thead for managing dates, days, etc. <thead> calendar-table-row a calendar table interactive grid row for managing dates, days, etc. <tr> calendar-table-td a calendar table interactive grid data cell for managing dates, days, etc. <td> calendar-table-th a calendar table interactive grid header cell for managing dates, days, etc. <th> call-to-action a prominent prompt encouraging user action caption a caption for a table or figure element card a grouped content container with header, body, and footer areas care-card a medical care instruction card with urgency levels carousel a slideshow for cycling through content items cascader a multi-level dropdown for selecting a value from a hierarchy cesko-cestovni-pas-input an input for entering Czech Republic's Cestovní pas cesko-cestovni-pas-view a read-only display of Czech Republic's Cestovní pas cesko-rodne-cislo-input an input for entering Czech Republic's Rodné číslo (RČ) cesko-rodne-cislo-view a read-only display of Czech Republic's Rodné číslo (RČ) character a single character display element character-counter a counter showing remaining or used characters in a text field chat-list an ordered list of chat list item components chat-list-item one chat list item component, typically containing one chat message component chat-message a chat message shows one chat conversation message entry and all its data, including the author avatar, author name, time, etc. chat-nav a navigation container for chat information check-list an ordered list of check list item components check-list-item one check list item component with a checkbox checkbox-group a group component that manages a collection of checkboxes with shared state checkbox-input a checkbox input for toggling a boolean value <input type="checkbox"> citation a citation acknowledges the relevance of a work of another to the topic of discussion clamp-text a text container that truncates content to a maximum number of lines clipboard-copy-button a button that copies text to the clipboard coachmark an anchored popover that spotlights and explains a single feature code an inline code span for displaying short code snippets within surrounding text code-block a block of formatted code with optional line numbers and line highlighting collapsible a container that can be expanded or collapsed collection-list a compact list of multiple related items such as articles or events collection-list-item one item in a collection list with optional image, heading, meta, and description color-input an input for selecting a color value <input type="color"> color-picker a two-dimensional board for picking colors by hue and saturation color-picker-button a button showing a color swatch in a color picker column-chart a vertical column chart visualization for displaying data combobox a text input combined with a dropdown list for filtering options command a command palette for searching and executing actions comment a comment is anything that expresses an opinion, observation, explanation, etc. container a generic block-level content container container-with-fixed-width a centered content wrapper with a fixed max-width breakpoint container-with-fluid-width a full-width content wrapper with horizontal padding content-block a content width constraint container with named column widths contents-link one table of contents link contents-list an contents ordered list of contents list item components contents-list-item one contents list item contents-nav a contents navigation area context-menu a menu that appears on right-click or long-press context-menu-item one item in a context menu contextual-help a help button that opens a popover with explanatory content currency-input a locale-aware currency input with automatic formatting, symbols, separators cymru-rhif-y-gwasanaeth-iechyd-gwladol-input an input for entering Wales's Rhif y Gwasanaeth Iechyd Gwladol (Rhif GIG) cymru-rhif-y-gwasanaeth-iechyd-gwladol-view a read-only display of Wales's Rhif y Gwasanaeth Iechyd Gwladol (Rhif GIG) kypros-national-passport-number-input an input for entering Kypros's National Passport Number kypros-national-passport-number-view a read-only display of Kypros's National Passport Number danmark-personnummer-input an input for entering Denmark's Personnummer (CPR-nummer) (CPR) danmark-personnummer-view a read-only display of Denmark's Personnummer (CPR-nummer) (CPR) data-filter-form a form for filtering data by criteria data-table a data table interactive grid for displaying and sorting tabular data <table> data-table-body a data table interactive grid tbody for displaying and sorting tabular data <tbody> data-table-foot a data table interactive grid tfoot for displaying and sorting tabular data <tfoot> data-table-head a data table interactive grid thead for displaying and sorting tabular data <thead> data-table-row a data table interactive grid row for displaying and sorting tabular data <tr> data-table-td a data table interactive grid data cell for displaying and sorting tabular data <td> data-table-th a data table interactive grid header cell for displaying and sorting tabular data <th> date-field a structured field for entering date components date-input an input for entering a date value <input type="date"> date-range paired start and end date inputs date-time-local-input an input for entering a date and time without time zone <input type="datetime-local"> date-time-now-input an input for entering a date and time and "now" button <input type="date"><input type="time"><button type="button"> date-time-view a read-only display of a formatted date and time description-list a definition list displaying information in key-value format <dl> description-list-item one key-value pair in a description list using dt and dd elements details a disclosure widget that shows and hides content deutschland-krankenversichertennummer-input an input for entering Germany's Krankenversichertennummer (KVNR) deutschland-krankenversichertennummer-view a read-only display of Germany's Krankenversichertennummer (KVNR) dial a rotary dial control for selecting a value dial-group a group of dial components dialog a modal or non-modal dialog window diff a side-by-side comparison of two items digital-object-identifier-link a permanent hyperlink for a Digital Object Identifier (DOI) to an electronic source do-list a guideline list of encouraged do-list-item components do-list-item an encouraged-practice item in a do-list guideline list document-list a list displaying documents with titles and metadata document-list-item one document entry in a document list dont-list a guideline list of discouraged dont-list-item components dont-list-item a discouraged-practice item in a dont-list guideline list download-button a download link styled as a button, with optional file size and format metadata draft an early preliminary version of content such as an article, email, report, etc. drawer a panel that slides in from the edge of the screen dropdown-menu a menu that opens below a trigger button editable an inline-editable text element that toggles between view and edit modes editable-form a form wrapper for inline editing of content eesti-isikukood-input an input for entering Estonia's Isikukood (IK) eesti-isikukood-view a read-only display of Estonia's Isikukood (IK) ellada-dematerialised-securities-system-input an input for entering Greece's Dematerialised Securities System (DSS) ellada-dematerialised-securities-system-view a read-only display of Greece's Dematerialised Securities System (DSS) email-input an input for entering an email address <input type="email"> email-link a mailto hyperlink for an email address emoji a single emoji character with accessible name emoji-character-picker a picker for browsing and selecting emoji characters end-notes a section of titled endnote items at the end of an article england-national-health-service-number-input an input for entering England's National Health Service Number (NHS) england-national-health-service-number-view a read-only display of England's National Health Service Number (NHS) error-message an error message associated with a form field error-summary a summary of all validation errors on a form espana-codigo-de-identificacion-fiscal-input an input for entering Spain's Código de Identificación Fiscal (CIF) espana-codigo-de-identificacion-fiscal-view a read-only display of Spain's Código de Identificación Fiscal (CIF) espana-tarjeta-sanitaria-individual-input an input for entering an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier espana-tarjeta-sanitaria-individual-view a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier event an event component that contains other event-related information expander a control that expands to reveal more content feature-card a large content card with a prominent image positioned alongside or above the text feature-photo a responsive photo with lazy loading and alt text validation field a form field wrapper with label, input, and error message fieldset a group of related form fields with a legend figure a self-contained figure with optional caption file-dialog a dialog for browsing and selecting files file-input an input for selecting files from the file system <input type="file"> file-manager a file browser for navigating and managing files file-upload a drag-and-drop area for uploading files five-face-rating-picker a picker for selecting a 1-5 satisfaction rating using face labels five-face-rating-picker-button a picker button for selecting a 1-5 satisfaction rating using face labels five-face-rating-view a read-only display of a five-face satisfaction rating five-star-rating-picker a picker for selecting a 1-5 star rating using radio buttons five-star-rating-picker-button a picker button for selecting a 1-5 star rating using radio buttons five-star-rating-view a read-only display of a five-star rating flair a decorative highlight or emphasis element flex-stack a flex layout container for vertical or horizontal stacking with consistent gap float-button a floating action button anchored to a viewport corner floating-panel a panel that floats above page content footer a page or section footer area footnote a footnote reference and content element form a form element for collecting and submitting user data framer a container for framed content display with decorative border france-numero-d-identification-au-repertoire-input an input for entering a France numéro d'identification au répertoire (NIR) unique national healthcare identifier france-numero-d-identification-au-repertoire-view a read-only display of a France numéro d'identification au répertoire (NIR) unique national healthcare identifier gantt-table a Gantt chart table interactive grid for planning schedule visualization <table> gantt-table-tbody a Gantt chart table interactive grid tbody for planning schedule visualization <tbody> gantt-table-td a Gantt chart table interactive grid data cell for planning schedule visualization <td> gantt-table-tfoot a Gantt chart table interactive grid tfoot for planning schedule visualization <tfoot> gantt-table-th a Gantt chart table interactive grid header cell for planning schedule visualization <th> gantt-table-thead a Gantt chart table interactive grid thead for planning schedule visualization <thead> gantt-table-tr a Gantt chart table interactive grid row for planning schedule visualization <tr> go-to-next-section a link that takes users to the next section of the current page go-to-previous-section a link that takes users to the previous section of the current page go-to-top a link that returns users to the top of a long page government-banner a banner identifying a website as belonging to a government, with an expandable details panel government-identifier an identifier section with a parent agency logo, agency name, and required government links grail-layout a responsive web design structure with header, left aside, center main, right aside, footer grail-layout-bottom-footer grail layout bottom footer full width with <footer> tag grail-layout-center-main grail layout center main content with <main> tag grail-layout-left-aside grail layout left aside sidebar with <aside> tag grail-layout-right-aside grail layout right aside sidebar with <aside> tag grail-layout-top-header grail layout top header full width with <header> tag graphic-block a wrapper for charts and graphics with title, description, notes, and ARIA description grid a CSS grid layout container with configurable columns and gap hamburger-menu a toggle button that opens a mobile navigation menu header a page or section header area headline a page headline with heading, subtitle, and byline area hero a large box or image with a title and description hero-headline a full-bleed hero section with headline overlaid on media hidden-input a hidden input for including data in form submission <input type="hidden"> hint hint text providing guidance for a form field horizontal-scroller a horizontally scrollable content container hover-card a card that appears on hover over a trigger element hrvatska-osobni-identifikacijski-broj-input an input for entering Croatia's Osobni identifikacijski broj (OIB) hrvatska-osobni-identifikacijski-broj-view a read-only display of Croatia's Osobni identifikacijski broj (OIB) icon a container for displaying an icon icon-button a button containing only an icon with a required accessible label icon-list an ordered list of icon list item components icon-list-item one item in an icon list with a leading icon slot image an image element with alt text image-cropper a container for cropping and resizing an image to a selected region image-file-input an input for selecting image files with preview image-input a graphical submit button that displays an image <input type="image"> info-state a composition of illustration, title, description, and action for empty, error, or info states information-callout a callout box highlighting informational content input a generic HTML input element input-group a group wrapping an input with prefix and suffix addons input-with-mask an input displaying a format mask placeholder for the user to fill in inset-text indented text to distinguish it from surrounding content eire-individual-health-identifier-input an input for entering Eire Individual Health Identifier (IHI) unique national healthcare identifier eire-individual-health-identifier-view a read-only display of Eire Individual Health Identifier (IHI) unique national healthcare identifier island-kennitala-input an input for entering Iceland's Kennitala island-kennitala-view a read-only display of Iceland's Kennitala italia-codice-fiscale-input an input for entering Italy's Codice fiscale (CF) italia-codice-fiscale-view a read-only display of Italy's Codice fiscale (CF) kanban-table a kanban board table interactive grid for organizing items by status <table> kanban-table-body a kanban board table interactive grid tbody for organizing items by status <tbody> kanban-table-foot a kanban board table interactive grid tfoot for organizing items by status <tfoot> kanban-table-head a kanban board table interactive grid thead for organizing items by status <thead> kanban-table-row a kanban board table interactive grid row for organizing items by status <tr> kanban-table-td kanban board table interactive grid data cell for organizing items by status <td> kanban-table-th a kanban board table interactive grid header cell for organizing items by status <th> kbd show keyboard shortcuts and key combinations in a styled inline element label a label associated with a form input latvija-personas-kods-input an input for entering Latvia's Personas kods latvija-personas-kods-view a read-only display of Latvia's Personas kods liechtenstein-national-identity-card-number-input an input for entering Liechtenstein's Liechtenstein National Identity Card Number liechtenstein-national-identity-card-number-view a read-only display of Liechtenstein's Liechtenstein National Identity Card Number liechtenstein-passport-number-input an input for entering Liechtenstein's Liechtenstein Passport Number liechtenstein-passport-number-view a read-only display of Liechtenstein's Liechtenstein Passport Number lietuva-asmens-kodas-input an input for entering Lithuania's Asmens kodas lietuva-asmens-kodas-view a read-only display of Lithuania's Asmens kodas lietuva-pasas-input an input for entering Lithuania's Pasas lietuva-pasas-view a read-only display of Lithuania's Pasas line-chart a line chart visualization connecting data points to display data listbox a list of selectable options with keyboard navigation loading a loading indicator, such as text, or image, or animation malta-national-identification-number-input an input for entering Malta's Malta National Identification Number malta-national-identification-number-view a read-only display of Malta's Malta National Identification Number malta-passport-number-input an input for entering Malta's Malta Passport Number malta-passport-number-view a read-only display of Malta's Malta Passport Number masonry a masonry layout container for variable-height items measurement-instance-input an input for entering a measurement value and unit measurement-instance-view a read-only display of a measurement value and unit measurement-system-input an input for selecting a measurement system measurement-system-view a read-only display of a measurement system measurement-unit-input an input for selecting a measurement unit measurement-unit-view a read-only display of a measurement unit medical-banner a prominent message bar across the top of a page, with medical information medical-banner-box a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information medical-banner-box-for-advice a medical record banner box for advice information e.g. contacts, contexts, plans, etc. medical-banner-box-for-danger a medical record banner box for danger information e.g. reactions, warnings, alarms, etc. mentions-input a text input with at-mention autocomplete suggestions menu a list of actions or options triggered by a button menu-bar a horizontal bar of menu triggers menu-bar-button one item in a menu bar menu-group a labeled section of menu items within a menu menu-item one item in a menu meter a gauge displaying a scalar value within a known range mockup-browser a box area that looks like a web browser mockup-laptop a box area that looks like a laptop computer mockup-phone-landscape a box area that looks like a mobile phone in landscape orientation mockup-phone-portrait a box area that looks like a mobile phone mockup-shell a box area that looks like a terminal shell mockup-tablet-landscape a box area that looks like a tablet computer in landscape mode mockup-tablet-portrait a box area that looks like a tablet computer in portrait mode mockup-watch a box area that looks like a smart watch mockup-window a box area that looks like a desktop window month-input an input for selecting a month and year <input type="month"> mutually-exclusive a container ensuring only one option can be selected from a group navigation-menu a site-wide navigation menu with links nederland-burgerservice-nummer-input an input for entering Netherlands's Burgerservicenummer (BSN) nederland-burgerservice-nummer-view a read-only display of Netherlands's Burgerservicenummer (BSN) nederland-identiteitskaart-nummer-input an input for entering Netherlands's Identiteitskaart Nummer nederland-identiteitskaart-nummer-view a read-only display of Netherlands's Identiteitskaart Nummer nederland-paspoort-nummer-input an input for entering Netherlands's Paspoort Nummer nederland-paspoort-nummer-view a read-only display of Netherlands's Paspoort Nummer net-promoter-score-picker a picker for selecting a 0-10 Net Promoter Score net-promoter-score-picker-button a picker button for selecting a 0-10 Net Promoter Score net-promoter-score-view a read-only display of a Net Promoter Score newsletter-signup an email subscription form composition with idle, submitting, success, and error states norge-fodselsnummer-input an input for entering Norway's Fødselsnummer norge-fodselsnummer-view a read-only display of Norway's Fødselsnummer tuaisceart-eireann-health-and-care-number-input an input for entering Tuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier tuaisceart-eireann-health-and-care-number-view a read-only display of Tuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier notification a brief message about an event or update number-input an input for entering a numeric value with validation <input type="number"> option an option element within a select dropdown organization an organization component that contains other organization-related information overlay-container a full-viewport overlay backdrop for modals and sheets padding-reset a container that resets padding inside fluid-width containers pagination-link one pagination link in the trail pagination-list an ordered list of pagination list items pagination-list-item one pagination list item in the trail pagination-nav an ordered list of page navigation links panel a generic content panel with optional heading password-input an input for entering a password with obscured text <input type="password"> password-input-or-text-input-div an input for entering a password <input type="password"> or text <input type="text"> with show/hide toggle person a person component that contains other person-related information phase-banner a banner showing service development phase and inviting feedback photo-pack a collection of photos displayed together as a group pictogram an icon-based component pairing an icon with a title and description in a centered or side layout pin-input-div a series of single-digit inputs for entering a PIN or OTP code place a place component that contains other place-related information polska-numer-identyfikacji-podatkowej-input an input for entering Poland's Numer Identyfikacji Podatkowej (NIP) polska-numer-identyfikacji-podatkowej-view a read-only display of Poland's Numer Identyfikacji Podatkowej (NIP) polska-pesel-input an input for entering Poland's PESEL polska-pesel-view a read-only display of Poland's PESEL popconfirm-dialog a popover dialog with confirm and cancel buttons popover a floating content box anchored to a trigger element popup a temporary overlay that appears above page content portugal-numero-de-identificacao-fiscal-input an input for entering Portugal's Número de Identificação Fiscal (NIF) portugal-numero-de-identificacao-fiscal-view a read-only display of Portugal's Número de Identificação Fiscal (NIF) portugal-passaporte-input an input for entering Portugal's Passaporte portugal-passaporte-view a read-only display of Portugal's Passaporte postal-code-input an input for entering a postal or ZIP code postal-code-view a read-only display of a postal or ZIP code product-card a specialized card for displaying a product with image, title, price, and actions progress a horizontal progress bar showing completion progress-bar a horizontal progress indicator progress-circle a circular progress indicator progress-spinner an indeterminate spinning progress indicator qr-code-image a QR code image generated from text or URL data question a question is anything that asks for information, invites a response, tests knowledge, etc. radio-group a group of radio buttons for selecting one option radio-input a single radio button input <input type="radio"> range-input a slider input for selecting a value within a range <input type="range"> red-amber-green-picker a picker for selecting a red/amber/green status red-amber-green-picker-button a picker button for selecting a red/amber/green status red-amber-green-view a read-only display of a red/amber/green status red-orange-yellow-green-blue-picker a picker for selecting a five-level color status red-orange-yellow-green-blue-picker-button a picker button for selecting a five-level color status red-orange-yellow-green-blue-view a read-only display of a five-level color status related-content a section providing links to related or supporting information reset-input a button input that resets a form to default values <input type="reset"> resizable a container that the user can resize by dragging review-date a display of a content review date romania-cod-numeric-personal-input an input for entering Romania's Cod Numeric Personal (CNP) romania-cod-numeric-personal-view a read-only display of Romania's Cod Numeric Personal (CNP) romania-pasaport-input an input for entering Romania's Paşaport romania-pasaport-view a read-only display of Romania's Paşaport scatter-chart a scatter chart visualization using dots to display data screen-reader-span a visually hidden span of text intended for screen readers to provide more descriptive labels scroll-area a scrollable container with custom scrollbar support scroll-bar a custom scrollbar element scroller a scrollytelling container with step-based foreground and background composition scroller-base a low-level scroll position tracking primitive for scrollytelling scroller-video a video-driven scrollytelling component with frame-by-frame scrubbing search-input an input for entering a search query <input type="search"> section-heading a styled heading introducing a major content section, with optional eyebrow and subtitle section-link one section link in the navigation section-list a list of section navigation items section-list-item one section navigation item section-nav a navigation container for section navigation links segment-group a group of mutually exclusive segment options segment-group-item one selectable segment in a segment group select a dropdown select element for choosing one option select-with-extras a select dropdown with additional features like search or groups separator a horizontal or vertical divider between content sections share-page a component for sharing the page on social media sheet a panel that slides in from a screen edge as an overlay sidebar a side panel for navigation or supplementary content signature-pad a drawing area for capturing a handwritten signature skeleton a placeholder loading animation for content skip-link a hidden link for keyboard users to skip to main content slide-out-drawer a drawer that slides out from the side of the page slider a draggable control for selecting a value along a track slider-button a button with a slider that the user needs to slide to confirm slovenija-emso-input an input for entering Slovenia's Enotna Matična Številka Občana (EMŠO) slovenija-emso-view a read-only display of Slovenia's Enotna Matična Številka Občana (EMŠO) slovensko-pas-input an input for entering Slovakia's Pas slovensko-pas-view a read-only display of Slovakia's Pas slovensko-rodne-cislo-input an input for entering Slovakia's Rodné číslo (RČ) slovensko-rodne-cislo-view a read-only display of Slovakia's Rodné číslo (RČ) sonner a toast notification manager sparkline a small inline chart showing a data trend split-button a button with a primary action and a dropdown for related actions split-view a two-panel resizable layout container with a draggable divider between them splitter a draggable divider for resizing adjacent panels statistic a numeric value display with title, prefix, and suffix status-light a small colored dot status indicator paired with a status label status-tag a tag showing the current status of a task step-list an ordered list of step items showing progress through a multi-step process step-list-item one step in a step list with status of waiting, in progress, finished, or error sticky-promo-banner a fixed-position promotional banner with a dismiss button submit-input a button input that submits a form <input type="submit"> success-panel a panel confirming a task has been completed summary-box a boxed callout highlighting key takeaways or next steps from a longer page summary-list an ordered list of key-value summary pairs summary-list-item one key-value pair in a summary list suomi-henkilotunnus-input an input for entering Finland's Henkilötunnus (HETU) suomi-henkilotunnus-view a read-only display of Finland's Henkilötunnus (HETU) super-banner a super-banner communicates a high-priority state that affects an entire app, experience, process, or system sverige-personnummer-input an input for entering Sweden's Personnummer sverige-personnummer-view a read-only display of Sweden's Personnummer switch-button a toggle switch for turning a setting on or off tab-bar a group of tabs for switching between content panels tab-bar-button one tab button in a tab group tab-panel a content panel associated with a tab in a tab bar table a table with rows and columns <table> table-body a table interactive grid tbody <tbody> table-foot a table interactive grid tfoot <tfoot> table-head a table interactive grid thead <thead> table-row a table interactive grid row <tr> table-td a table interactive grid data cell <td> table-th a table interactive grid header cell <th> tag a keyword label for categorizing content tag-group a group of tag elements tag-input an input for adding and removing tags task-bar a horizontal bar of task shortcuts or actions task-bar-button one item in a task bar task-list an ordered list of task list items task-list-item one task item with a checkbox and label tel-input an input for entering a telephone number <input type="tel"> tel-link a tel hyperlink for a telephone number text-area-input a multi-line text input area text-area-input-with-character-counter a multi-line text area input with a caption below that is a character counter "[number] of [maximum] characters" text-input a single-line text input field <input type="text"> text-input-with-search a single-line text input field <input type="text"> with search capability theme-provider a container that applies CSS custom properties from a theme object to its children theme-select a select dropdown for choosing a theme theme-select-option one option in a theme select dropdown theme-view a read-only display of the current theme tile a grouping container that presents related content in a structured format, often as a single clickable area tile-map a tile cartogram map with configurable layers for geographic data visualization time-input an input for entering a time value <input type="time"> time-picker-input an input with a dropdown for picking a time timeline-list an ordered list of chronological events or milestones timeline-list-item one event in a timeline list timeout-dialog a modal dialog warning users before session timeout timer a countdown or elapsed time display timer-button a button with a timer that will automatically click after a given amount of time toast a brief auto-dismissing notification message toggle-button a button that toggles between pressed and unpressed states toggle-group a group of toggle buttons for selecting options tool-bar a horizontal bar of tool actions tool-bar-button one action button in a tool bar tooltip a small popup showing descriptive text on hover or focus tour a tour guide, such as for sightseeing, or pathways, or demonstrations, etc. tour-list an ordered list of tour guide steps tour-list-item one step in a tour guide list transfer-list a dual list box for moving items between two lists tree-link one link in the tree tree-list a hierarchical list with nested expandable items tree-list-item one item in a tree navigation list tree-menu a hierarchical tree menu with expandable branches tree-nav a hierarchical navigation with expandable branches tree-select a select dropdown showing a tree of hierarchical options united-kingdom-national-health-service-number-input an input for entering a UK NHS number united-kingdom-national-health-service-number-view a read-only display of a UK NHS number united-kingdom-national-insurance-number-input an input for entering United Kingdom's National Insurance Number (NINO) united-kingdom-national-insurance-number-view a read-only display of United Kingdom's National Insurance Number (NINO) united-states-social-security-number-input an input for entering a US Social Security number united-states-social-security-number-view a read-only display of a US Social Security number url-input an input for entering a URL <input type="url"> validation-list a live-feedback list of input validation rules with pending, passed, and failed states validation-list-item one validation rule in a validation list with a status of pending, passed, or failed video-player a video player with play-in-view behavior, custom controls, and IntersectionObserver support visible an IntersectionObserver wrapper that exposes element visibility state warning-callout a callout box highlighting a warning message watermark a decorative repeating overlay text or image marking a page week-input an input for selecting a week and year <input type="week"> aotearoa-national-health-index-input an input for entering New Zealand's National Health Index (NHI) Number aotearoa-national-health-index-view a read-only display of New Zealand's National Health Index (NHI) Number pilipinas-philhealth-identification-number-input an input for entering the Philippines' PhilHealth Identification Number (PIN) pilipinas-philhealth-identification-number-view a read-only display of the Philippines' PhilHealth Identification Number (PIN) brasil-cartao-nacional-de-saude-input an input for entering Brazil's Cartao Nacional de Saude (CNS) brasil-cartao-nacional-de-saude-view a read-only display of Brazil's Cartao Nacional de Saude (CNS) schweiz-ahv-nummer-input an input for entering Switzerland's AHV-Nummer / Numero AVS schweiz-ahv-nummer-view a read-only display of Switzerland's AHV-Nummer / Numero AVS canada-social-insurance-number-input an input for entering Canada's Social Insurance Number (SIN) canada-social-insurance-number-view a read-only display of Canada's Social Insurance Number (SIN) hanguk-jumin-deungnok-beonho-input an input for entering South Korea's Resident Registration Number hanguk-jumin-deungnok-beonho-view a read-only display of South Korea's Resident Registration Number nihon-kojin-bango-input an input for entering Japan's Individual Number (My Number) nihon-kojin-bango-view a read-only display of Japan's Individual Number (My Number) bharat-aadhaar-input an input for entering India's Aadhaar number bharat-aadhaar-view a read-only display of India's Aadhaar number yisrael-teudat-zehut-input an input for entering Israel's Teudat Zehut identity number yisrael-teudat-zehut-view a read-only display of Israel's Teudat Zehut identity number south-africa-identity-number-input an input for entering South Africa's Identity Number south-africa-identity-number-view a read-only display of South Africa's Identity Number mexico-clave-unica-de-registro-de-poblacion-input an input for entering Mexico's Clave Unica de Registro de Poblacion (CURP) mexico-clave-unica-de-registro-de-poblacion-view a read-only display of Mexico's Clave Unica de Registro de Poblacion (CURP) singapore-national-registration-identity-card-input an input for entering Singapore's National Registration Identity Card number (NRIC/FIN) singapore-national-registration-identity-card-view a read-only display of Singapore's National Registration Identity Card number (NRIC/FIN) osterreich-sozialversicherungsnummer-input an input for entering Austria's Sozialversicherungsnummer (SVNR) osterreich-sozialversicherungsnummer-view a read-only display of Austria's Sozialversicherungsnummer (SVNR) magyarorszag-taj-szam-input an input for entering Hungary's Tarsadalombiztositasi Azonosito Jel (TAJ) magyarorszag-taj-szam-view a read-only display of Hungary's Tarsadalombiztositasi Azonosito Jel (TAJ) luxembourg-matricule-input an input for entering Luxembourg's Numero d'Identification Nationale (Matricule) luxembourg-matricule-view a read-only display of Luxembourg's Numero d'Identification Nationale (Matricule) zhongguo-jumin-shenfenzheng-haoma-input an input for entering China's Resident Identity Card Number zhongguo-jumin-shenfenzheng-haoma-view a read-only display of China's Resident Identity Card Number rossiya-snils-input an input for entering Russia's SNILS Individual Insurance Account Number rossiya-snils-view a read-only display of Russia's SNILS Individual Insurance Account Number turkiye-tc-kimlik-numarasi-input an input for entering Turkey's T.C. Kimlik Numarasi turkiye-tc-kimlik-numarasi-view a read-only display of Turkey's T.C. Kimlik Numarasi argentina-codigo-unico-de-identificacion-laboral-input an input for entering Argentina's Codigo Unico de Identificacion Laboral (CUIL) argentina-codigo-unico-de-identificacion-laboral-view a read-only display of Argentina's Codigo Unico de Identificacion Laboral (CUIL) ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-input an input for entering Ukraine's Taxpayer Registration Card Number (RNOKPP) ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-view a read-only display of Ukraine's Taxpayer Registration Card Number (RNOKPP) indonesia-nomor-induk-kependudukan-input an input for entering Indonesia's Nomor Induk Kependudukan (NIK) indonesia-nomor-induk-kependudukan-view a read-only display of Indonesia's Nomor Induk Kependudukan (NIK) prathet-thai-lek-prajam-tua-prachachon-input an input for entering Thailand's National Identification Number prathet-thai-lek-prajam-tua-prachachon-view a read-only display of Thailand's National Identification Number chile-rol-unico-nacional-input an input for entering Chile's Rol Unico Nacional (RUN) chile-rol-unico-nacional-view a read-only display of Chile's Rol Unico Nacional (RUN) misr-al-raqm-al-qawmi-input an input for entering Egypt's National Number misr-al-raqm-al-qawmi-view a read-only display of Egypt's National Number one-time-password-input a single one-time-password input with a numeric keypad, SMS autofill, and a fixed length multi-select a native select that allows choosing several options at once multi-select-with-extras a multiple-choice select with additional features like search, groups, or selected-value chips empty-state a placeholder shown when a list, table, or view has nothing to display yet, with room for guidance and an action show-more a content region clamped to a shorter height with a button that reveals the rest kbd-shortcut a keyboard shortcut made of one or more key caps, for example Ctrl plus K calendar-year-table a calendar grid showing the twelve months of one year calendar-month-table a calendar grid showing the days of one month calendar-week-table a calendar grid showing the seven days of one week calendar-day-table a calendar grid showing the time slots of one day thinking a collapsible block that shows an AI agent's reasoning or thinking, closed by default gauge-chart a dial chart showing one value within a range, with optional thresholds heatmap-chart a grid chart where cell colour encodes the value at each row and column radar-chart a chart plotting several axes from a shared centre as a polygon sankey-chart a flow chart where link width encodes the quantity moving between nodes file-tree a hierarchical tree of folders and files with expandable folders pie-chart a circular chart divided into slices that show each part of a whole ring-chart a pie chart with a hollow centre, often used to show progress or a share of a total funnel-chart a chart of stages narrowing from top to bottom, showing how a quantity drops at each step candlestick-chart a financial chart showing open, high, low and close values for each period as candles composed-chart a chart that combines several chart types, such as bars and a line, on shared axes choropleth-chart a map chart that shades regions by the value of a measure sunburst-chart a radial chart showing a hierarchy as concentric rings of arcs streaming-text text that arrives in chunks, as an AI answer streams in, announced once to screen readers when complete tool-call a collapsible record of one tool invocation by an AI agent, with a name, a status word, and its input, output or error tool-call-name the name of the tool in a tool call, shown in the summary tool-call-status the status of a tool call as a word, such as pending, running, done or error tool-call-input the input or arguments passed to a tool in a tool call tool-call-output the output or result returned by a tool in a tool call tool-call-error the error shown when a tool call fails mark an inline highlight marking text as relevant or referenced, such as a search match, using the native mark element chat-composer a chat input form with a text area that grows with its content, sends on Enter, and turns its send button into a stop button while a reply is in progress
