Archetypes reference

An archetype is a component blueprint: an invariant contract, a published anatomy, and a composition of behavior atoms. The prelude ships 51 of them - the intersection of the top design systems, anchored on the WAI-ARIA patterns. Every component you build in the Studio starts from one.

#What an archetype is

Three parts, all platform-neutral:

• Contract- what data goes in and comes out, and the intent. The contract is the archetype's identity: same contract means same archetype, however deep the per-platform divergence runs. A select realized as a popover listbox on the web and as a spinning wheel on iOS is still one SingleSelect- “one of a known set” in, a change event out.
• Anatomy - the named parts, as a small tree. Each part carries a semantic role (container, item, text, control, input, icon, content) and may nest - trigger.value, surface.option.check. No HTML tag or native view is ever fixed here; the concrete element is a realization concern.
• Composition - which behavior atoms it bundles and how they are wired. A trailing ? below marks an optional behavior.

Where a target can't realize an archetype directly, a substitution maps the intent to a different idiomatic control - checkbox becomes switch on iOS - without touching the contract. Those notable divergences are listed per archetype below.

#Actions

• Button - label/icon, fires an action. Composes activation (the action-firing core - the event is a contract obligation, not a platform freebie), pressability (feedback only), async-state? (opt-in pending UI). Realization: Material FAB/elevated/tonal; iOS .borderedProminent.
• ToggleButton - an on/off action. Composes toggle, pressability.
• MenuButton - opens a menu of actions. Composes presentation, browse, typeahead?, dismiss.
• Link - navigates. Composes activation (the navigate-firing core), pressability.

#Inputs

• Form - a set of fields, one submit. Composes submission, which coordinates the fields' validation machines as a set: collective check, focus-first-error, async submit.
• Field - label + control + error/help wrapper. Composes validation.
• TextField - a string value. Composes value-entry, validation?.
• TextArea - a multiline string value. Composes value-entry, validation?.
• SearchField - a query string + clear. Composes value-entry, filter?.
• BooleanInput - one boolean. Composes toggle. Realization: checkbox or switch by variant; iOS substitutes switch for checkbox (and drops indeterminate).
• ChoiceGroup - one-of-N, all options visible. Composes selection.single, browse. Realization: a radio stack or an inline segmented control - both are the same one-of-N contract; iOS: radio → wheel/segmented.
• SingleSelect - one of a known set, behind a trigger. Composes selection.single, presentation, browse, dismiss, typeahead?. Realization: web popover-listbox · Android dropdown/dialog · iOS menu, sheet, push, or wheel. The wheel variant swaps browse to scroll-detent and commits continuously (centered = selected) instead of explicitly - same atoms, one wire apart.
• MultiSelect - a subset of a set. Composes selection.multiple, presentation, browse, dismiss.
• Combobox - filtered single-select with text entry. Composes value-entry, filter, selection.single, browse, presentation, dismiss.
• Slider - value(s) on a range. Composes range, gesture(pan).
• Stepper - a number, ±. Composes stepping, value-entry.
• DatePicker - a date (or start..end range) value. Composes selection.single/range, presentation, browse, dismiss, masking. All the calendar logic (grid, month nav, range, disabled days) lives in a framework-agnostic behavior core shared across targets, so a React and a Vue app compute an identical calendar. Realization: web calendar-grid · iOS wheel (momentum + detent + haptics) · Android dialog.
• TimePicker - a time value. Composes selection.single, presentation, browse, dismiss, masking. Slot generation lives in the same shared time behavior core. Realization: web time-slot listbox · iOS wheel · Android dialog.
• ColorPicker - a color value. Composes range (area + hue tracks), value-entry, presentation, dismiss. The HSV/RGB/hex math + area/hue geometry live in a shared framework-agnostic color core (like DatePicker's calendar core); the value crosses the boundary as hex, rgb, or hsl per the project's representation setting.
• FileUpload - file(s). Composes activation (opens the file dialog), gesture(drop)? (drag-and-drop path), async-state (the upload lifecycle).
• TagsInput - a list of tokens. Composes value-entry, selection.multiple.
• Rating - a discrete score. Composes selection.single, pressability.

#Disclosure & overlays

• Disclosure (a.k.a. Collapsible) - expands a region. Composes disclosure.
• Accordion - a group of disclosures, single- or multi-open. Composes disclosure, selection.
• Tabs - switches panels. Composes navigation, browse. Realization: mobile swipes between panels; web doesn't.
• Dialog (a.k.a. Modal) - a blocking layer. Composes presentation(dialog), focus-scope, dismiss, backdrop. Realization: iOS sheet with detents.
• Drawer (a.k.a. Sidebar) - an edge-anchored panel. Composes presentation(sheet), focus-scope, dismiss, gesture(swipe)?.
• Popover - an anchored transient layer. Composes presentation(popover), anchoring, dismiss.
• Tooltip - a hover/focus hint. Composes presentation(popover), anchoring. Realization: requires input.pointer; touch targets fall back to tap/long-press.
• ContextMenu - a secondary-action menu. Composes presentation(menu), browse, dismiss. Realization: right-click on desktop, long-press on touch.

#Navigation

• Menu (a.k.a. MenuBar) - hierarchical actions. Composes presentation, browse, typeahead?, dismiss.
• NavigationBar - top-level destinations. Composes navigation. Realization: web top-nav · iOS tab-bar · Android bottom-nav/rail.
• Breadcrumbs - a path trail. Composes navigation. Realization: iOS substitutes a nav title + back button.
• Pagination - a page index. Composes navigation, stepping.
• Tree - a hierarchical collection. Composes disclosure, browse, selection.
• Wizard (a.k.a. Stepper-nav) - an ordered flow. Composes stepping-nav.

#Collections & data

• List (a.k.a. ListBox) - ordered items, optional select. Composes browse, selection?, virtualization?. Realization: iOS lists add swipe-to-delete via gesture.
• Table (a.k.a. DataGrid) - rows × columns with sort/select. Composes selection?, ordering, browse, resize?, virtualization?. Aggregation/grouping math is data, not a behavior.
• Carousel - paged horizontal items. Composes browse, momentum-scroll, gesture(swipe).
• Grid - a 2D arrangement of items. Composes browse (spatial), selection?.

#Feedback & status

• Toast (a.k.a. Snackbar) - a transient message. Composes presentation, auto-dismiss, liveness. Realization: iOS top banner; Android bottom snackbar.
• Alert (a.k.a. Banner) - an inline persistent message. Composes liveness.
• ProgressBar (a.k.a. Spinner) - completion feedback. Composes progress, liveness (announces completion to screen readers).
• Skeleton - a loading placeholder. Composes async-state.
• Badge - a numeric/status decoration. No behaviors.
• Meter - a numeric gauge. No behaviors.
• EmptyState - a no-content placeholder. No behaviors.

#Media & content

• Avatar - an identity image with initials fallback. No behaviors.
• Image - a bitmap with alt text and fit. No behaviors.
• Icon - a vector glyph from a set. No behaviors.
• AspectRatio - a ratio-locked box; really a layout facet wearing an archetype name. No behaviors.

How you turn one of these blueprints into your component: Authoring walkthrough.