Archetypes
An archetype is a component blueprint: an invariant contract, a published anatomy, and a composition of behaviours. The prelude ships 51 of them, the common core of the major design systems anchored on the WAI-ARIA patterns, and every component you build starts from one. Each has a page: its parts, what it composes, what states it exposes, and how each target realizes it.
#What an archetype gives a component
- A contract shape. “One of a known set in, a change event out” is what makes a select a select. The contract is the archetype's identity: however deep a platform diverges, the same contract is the same archetype.
- An anatomy. Named parts with a role each (container, item, text, control, input, icon, content), as a small tree. No element is ever fixed; the role is what a target derives its element from.
- Behaviours, already composed. Which atoms it bundles and how they are wired, which is the interaction engineering you never write. A trailing
?marks an optional one. - A realization per target, where targets genuinely differ: a select is a popover listbox on the web and a wheel on iOS, with the same contract.
Not archetypes
Pure layout helpers - a stack, a box, a divider, a spacer - are layout, not behavioural archetypes. A segmented control is not one either: it is
ChoiceGroup with the segmented realization, because it is the same one-of-N contract with a different look.#Actions
Things a person presses to make something happen.
#Inputs
Controls that hold a value and raise an event when it changes.
Forma set of fields, one submitsubmissionFieldlabel + control + error/help wrappervalidationTextFieldstring valuevalue-entry · validation?TextAreamultiline string valuevalue-entry · validation?SearchFieldquery string + clearvalue-entry · filter?BooleanInputone booltoggleChoiceGroupone-of-Nselection.single · browseSingleSelectone of a known setselection.single · presentation · browse · dismiss · typeahead?MultiSelectsubset of a setselection.multiple · presentation · browse · dismissComboboxfiltered single-select w/ entryvalue-entry · filter · selection.single · browse · presentation · dismissSlidervalue(s) on a rangerange · gesture(pan)Steppernumber ±stepping · value-entryDatePickerdate valueselection.single · presentation · browse · dismiss · maskingTimePickertime valueselection.single · presentation · browse · dismiss · maskingColorPickercolor valuerange · value-entry · presentation · dismissFileUploadfile(s)activation · gesture(drop)? · async-stateTagsInputlist of tokensvalue-entry · selection.multipleRatingdiscrete scoreselection.single · pressability
#Disclosure
Regions and layers that open and close.
Disclosureexpand region (a.k.a. Collapsible)disclosureAccordiongroup of disclosures (single/multi)disclosure · selectionTabsswitch panelsnavigation · browseDialogblocking layer (a.k.a. Modal)presentation(dialog) · focus-scope · dismiss · backdropDraweredge-anchored panel (a.k.a. Sidebar)presentation(sheet) · focus-scope · dismiss · gesture(swipe)?Popoveranchored transient layerpresentation(popover) · anchoring · dismissTooltiphover/focus hintpresentation(popover) · anchoringContextMenusecondary-action menupresentation(menu) · browse · dismiss
#Navigation
Moving between destinations.
Menuhierarchical actions (a.k.a. MenuBar)presentation · browse · typeahead? · dismissNavigationBartop-level destinationsnavigationBreadcrumbspath trailnavigationPaginationpage indexnavigation · steppingTreehierarchical collectiondisclosure · browse · selectionWizardordered flow (a.k.a. Stepper-nav)stepping-nav
#Collections
Ordered or spatial sets of items.
Listordered items, optional select (a.k.a. ListBox)browse · selection? · virtualization?Tablerows×cols, sort/select (a.k.a. DataGrid)selection? · ordering · browse · resize? · virtualization?Carouselpaged horizontal itemsbrowse · momentum-scroll · gesture(swipe)Grid2D arrangement of itemsbrowse · selection?
#Feedback
Telling a person what is happening.
Toasttransient message (a.k.a. Snackbar)presentation · auto-dismiss · livenessAlertinline persistent message (a.k.a. Banner)livenessProgressBarcompletion feedback (a.k.a. Spinner)progress · livenessSkeletonloading placeholderasync-stateBadgenumeric/status decorationno behavioursMeternumeric gaugeno behavioursEmptyStateno-content placeholderno behaviours
#Media
Images, glyphs and framed content.
How one of these becomes your component: the tour builds a Button, a TextField, a Switch and a Dialog from theirs.
These words, in the reference
- The built-in blueprint the component is an instance of (Button, Select, Dialog, ...).
- How the component is realized on one target, where the targets genuinely differ in behaviour or structure (a listbox on the web, a wheel on iOS).
- The per-archetype settings that change what a component does rather than how it looks.
- How a boolean control is realized: as a checkbox or as a switch.
- Inside a part: how a one-of-N choice is realized, as a radio group or as a segmented control.
Open a word for its entry, or read them all in the reference.
See it built in the tour3. A first component8. Inputs and behaviour