Components
67 official implementations. Inspect live variants, native behavior, exact tokens, typed APIs and complete copy bundles.
Actions
Button →The native push button in the four action tones; primary is the only filled button at rest, destructive fills on hover and always needs a confirmation or an undo.Icon button →A square ghost button whose only content is a 16px line icon; it always carries an accessible name and, as a toggle, aria-pressed.Link →The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar.Button group →Related independent native actions with individual tab stops.Segmented control →A short exclusive choice implemented with labelled native radios.
Basic forms
Field →The label, control, help and message wrapper that every form control sits in; it fixes the stacking order, the required mark, the description links and the invalid message.Text field →Single-line free-text entry, covering every native input type that renders as a line box; search, number and password are variants, not separate components.Textarea →Multi-line free-text entry in the same box as the text field; resizes vertically only and can show a character count.Select →A themed single-choice combobox or multiple-choice list backed by a native select for forms and the no-JavaScript fallback.Checkbox →The native checkbox drawn as a 16px square that fills with the primary action colour and a ✓ or – glyph; single, or a fieldset group of independent choices.Radio group →A fieldset of native radios for one exclusive choice; each radio is a 16px square that fills with the primary action colour and an inner square when checked.Switch →An on/off control that takes effect immediately; a button with role switch and aria-checked, drawn as a square-cornered track with a square thumb that fills with the primary colour when on.Fieldset →The native fieldset that groups related fields under a legend inside a 1px divider border; disabling it disables everything inside.Number field →The text-field box around a native number input with right-aligned tabular digits, an optional unit affix and two square stepper buttons that replace the host spinner.Search field →The text-field box around a native search input with a magnifier, a clear button that appears with a value, an optional shortcut hint, a loading glyph and a no-results status line.Range →A bounded native numeric slider with visible output.
Advanced forms
Combobox →A text input that filters a listbox of suggestions; the APG combobox with list autocomplete, rendered with the list open.Date picker →A themed date editor and calendar, alone or as a from/to pair, backed by native form values and constraints.Time picker →A themed time editor with explicit step buttons, backed by native time values and constraints.File input →A native file input behind a label styled as a secondary button, optionally inside a drop zone, with a list of chosen files and per-file errors.Wizard →A multi-step form with a stepper header, the current panel and back/next actions; native buttons with aria-current="step".Form builder →A bounded reference editor for five canonical field kinds, with keyboard ordering, local preview and explicit JSON definition import and export.Multiple selection →A searchable native checkbox group that preserves all selected form values.Repeater →Repeat native field rows with stable identities and keyboard ordering.
Navigation
Tabs →A tablist of buttons that switches between panels in place; the selected tab carries a 2px indicator bar and bright text, never a fill.Breadcrumbs →The path from the root to the current page as an ordered list of links separated by slashes; the last item is the current page and not a link.Pagination →Page links for a long result set; the current page takes the selection fill and aria-current, and the compact form reads "3 of 12" between previous and next.Sidebar navigation →A vertical list of section links with optional nested groups; the current section carries a 2px inline-start indicator and bright text, and the rail collapses to icons.Toolbar →A row of related controls under one tab stop with arrow-key movement; ghost buttons, a vertical separator, and a "more" button when the row overflows.Menu →A menu button that opens a list of actions on the raised surface inside a 1px overlay border; the active item is the selection fill and check items show a glyph.Skip link →The first tab stop of a page, hidden until it receives keyboard focus, that jumps past the chrome to the main content.Command palette →A compact square modal command prompt with local results and category labels.Tree →Hierarchical navigation with explicit expansion and one roving tab stop.Disclosure →Native details and summary for supporting content.
Information display
Card →A bordered panel that groups a title, body and metadata; a link card makes the whole panel one link, a selectable card is an option with the selection fill.List →A selectable list of rows (an APG listbox) in single or multiple selection; the selected row is the selection fill with a check glyph and an optional metadata column.Badge →A small square label for a status or a count; every status carries its glyph and its fill, the outline form uses the status border, and an empty badge is a dot with a name.Chip →A square bordered token for a filter, a removable value or a static tag; a pressed filter chip takes the selection fill and a check glyph.Table →A native data table with a header rule, row dividers, hover and selection fills, sortable headers with a glyph, and static empty and loading rows.Data table →A native table with controls: a selection column with a mixed select-all, sortable headers, row focus with the ring on the fill, and static resize handles.Description list →Semantic terms and values that wrap into a readable single column.Avatar →A square entity image with a named text fallback.Timeline →Chronological events with explicit dates, descriptions and current state.Chart →A one-series numeric chart with an always-visible complete data table.Keyboard key →A literal key or short keyboard sequence rendered as native kbd text.
Feedback and overlays
Alert →An inline status message with a mandatory glyph on the status tint behind a 1px status border; role alert for danger, status otherwise.Toast →A brief notification in a fixed corner stack; canvas surface behind a 1px overlay border, status tints for the four polite statuses and the danger fill for critical ones.Progress →A native progress element with a label and value; determinate fills with the primary colour, indeterminate shows static 45° stripes, never an animation.Loading indicator →A static ⋯ glyph with a worded label inside an aria-busy container; inline next to text or as a centred block. There is no spinner.Tooltip →A short description of a control shown on hover and focus; role tooltip linked by aria-describedby, a 1px overlay border on the raised surface, no arrow.Dialog →A native dialog on the overlay surface behind a 1px overlay border and the backdrop; modal when shown, with trapped focus and Escape to close.Drawer →A full-height modal panel anchored to the start or end edge; a native dialog on the overlay surface with a 1px overlay border on its inner edge.Empty state →What a container shows when it has nothing to list; a glyph, a heading in the bright text colour, one sentence in the muted colour and an optional secondary action.Skeleton →Static layout placeholders with a named loading status.Popover →A non-modal supporting panel with light dismissal and ordinary tab order.Error state →A specific failure explanation with an explicit recovery request.
Developer interfaces
Code editor →The editor surface, gutter, caret, current line, selection, bracket match and monochrome syntax roles that every code-editing or code-viewing host maps onto.Diagnostics →Inline problem markers in code (underline patterns, an error line and an overview stripe) and the problems panel that lists them as a listbox, each severity carrying its glyph.Diff view →Unified and split diffs as native tables; added, removed and modified rows keep their textual gutter marker, word-level changes are underlines, conflicts are double borders.Terminal →Terminal text with the readable heritage sixteen ANSI slots (D-029, D-032), the cursor, the selection and the six text attributes; a transcript, the slot grid and the attributes.Editor search →Literal search and match navigation over escaped read-only source text.
Composed specimens
Settings panel →A two-column settings screen composed from the sidebar-nav, fieldset, switch, select, radio-group, text-field, checkbox and button components; below 600px the sidebar becomes a tab strip.Admin form →A create-or-edit record screen composed from breadcrumbs, a wizard step list, alerts, six field components and a button row; the review step is a table with an Edit button per row.Filterable table →A list screen composed from a toolbar with search and filter, removable chips, a selectable sortable data-table with status badges, a count and pagination; with empty and loading variants.i3 window frame →The workstation frame; an i3 bar with workspaces and Chinese i3status labels above the terminal and code-editor components as tiled, tabbed or floating windows behind i3 title bars.File browser →Location navigation and a filterable native file table with bounded host actions.Compact dashboard →Named operational metrics, a complete chart and an actionable native records table.