J3W1 / DESIGN SYSTEM

Components

67 official implementations. Inspect live variants, native behavior, exact tokens, typed APIs and complete copy bundles.

Actions

stable / button

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.

stable / icon-button

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.

stable / link

Link →

The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar.

stable / button-group

Button group →

Related independent native actions with individual tab stops.

stable / segmented-control

Segmented control →

A short exclusive choice implemented with labelled native radios.

Basic forms

stable / field

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.

stable / text-field

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.

stable / textarea

Textarea →

Multi-line free-text entry in the same box as the text field; resizes vertically only and can show a character count.

stable / select

Select →

A themed single-choice combobox or multiple-choice list backed by a native select for forms and the no-JavaScript fallback.

stable / checkbox

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.

stable / radio-group

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.

stable / switch

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.

stable / fieldset

Fieldset →

The native fieldset that groups related fields under a legend inside a 1px divider border; disabling it disables everything inside.

stable / number-field

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.

stable / search-field

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.

stable / range

Range →

A bounded native numeric slider with visible output.

Advanced forms

stable / combobox

Combobox →

A text input that filters a listbox of suggestions; the APG combobox with list autocomplete, rendered with the list open.

stable / date-picker

Date picker →

A themed date editor and calendar, alone or as a from/to pair, backed by native form values and constraints.

stable / time-picker

Time picker →

A themed time editor with explicit step buttons, backed by native time values and constraints.

stable / file-input

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.

stable / wizard

Wizard →

A multi-step form with a stepper header, the current panel and back/next actions; native buttons with aria-current="step".

draft / form-builder

Form builder →

A bounded reference editor for five canonical field kinds, with keyboard ordering, local preview and explicit JSON definition import and export.

stable / multiselect

Multiple selection →

A searchable native checkbox group that preserves all selected form values.

stable / repeater

Repeater →

Repeat native field rows with stable identities and keyboard ordering.

Navigation

stable / tabs

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.

stable / breadcrumbs

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.

stable / pagination

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.

stable / sidebar-nav

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.

stable / toolbar

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.

stable / menu

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.

stable / skip-link

Skip link →

The first tab stop of a page, hidden until it receives keyboard focus, that jumps past the chrome to the main content.

stable / command-palette

Command palette →

A compact square modal command prompt with local results and category labels.

stable / tree

Tree →

Hierarchical navigation with explicit expansion and one roving tab stop.

stable / disclosure

Disclosure →

Native details and summary for supporting content.

Information display

stable / card

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.

stable / list

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.

stable / badge

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.

stable / chip

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.

stable / table

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.

stable / data-table

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.

stable / description-list

Description list →

Semantic terms and values that wrap into a readable single column.

stable / avatar

Avatar →

A square entity image with a named text fallback.

stable / timeline

Timeline →

Chronological events with explicit dates, descriptions and current state.

stable / chart

Chart →

A one-series numeric chart with an always-visible complete data table.

stable / kbd

Keyboard key →

A literal key or short keyboard sequence rendered as native kbd text.

Feedback and overlays

stable / alert

Alert →

An inline status message with a mandatory glyph on the status tint behind a 1px status border; role alert for danger, status otherwise.

stable / toast

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.

stable / progress

Progress →

A native progress element with a label and value; determinate fills with the primary colour, indeterminate shows static 45° stripes, never an animation.

stable / loading-indicator

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.

stable / tooltip

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.

stable / dialog

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.

stable / drawer

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.

stable / empty-state

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.

stable / skeleton

Skeleton →

Static layout placeholders with a named loading status.

stable / popover

Popover →

A non-modal supporting panel with light dismissal and ordinary tab order.

stable / error-state

Error state →

A specific failure explanation with an explicit recovery request.

Developer interfaces

stable / code-editor

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.

stable / diagnostics

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.

stable / diff-view

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.

stable / terminal

Terminal →

Terminal text on the terminal surface with the sixteen heritage ANSI slots carried exactly, the cursor, the selection and the six text attributes; a transcript, the slot grid and the attributes.

stable / editor-search

Editor search →

Literal search and match navigation over escaped read-only source text.

Composed specimens

stable / settings-panel