Skip to content
comp0

comp0

Components

97 patterns, each opened up with a live example, an anatomy map, exact keyboard controls, and a recipe you can copy one piece at a time.

Actions

Presses, links, uploads, and hidden helper text.

  • Button

    A familiar native button for one immediate action.

  • Toggle Button

    A button that stays on or off after a press.

  • Link

    A real anchor for travelling to another URL.

  • File Trigger

    A visible label that asks the browser for files.

  • Visually Hidden

    Extra words that screen readers can hear but sighted people do not see.

  • Keybinding Hint

    A visible, semantic reminder for a keyboard shortcut implemented elsewhere.

  • Meter

    A fully styleable gauge for a measurement within a known range.

  • Progress Bar

    A fully styleable progress indicator for how much of a task is done.

  • Alert

    An assertive live message for important feedback that needs immediate attention.

  • Status

    A polite live message for advisory feedback that should not interrupt the current task.

  • Error Summary

    A focused list of form errors that lets people jump directly to each invalid answer.

  • Separator

    A native rule that divides content into visually distinct groups.

  • Toast

    A short status message that appears, announces itself, and leaves on its own.

  • Toolbar

    A labelled strip of controls that share one tab stop.

  • Split Button

    A default-action button paired with a menu of alternatives.

  • Drop Zone

    A surface that accepts files dropped from the desktop.

  • Avatar

    An image that keeps a graceful stand-in while it loads or fails.

Charts

Accessible visual and tabular views of quantitative values.

  • Bar Chart

    A categorical comparison with visible axes and the same exact values in a native table.

  • Column Chart

    A vertical categorical comparison with visible axes and the same exact values in a native table.

  • Line Chart

    A trend across ordered numeric or date values, with visible axes and an exact-value table.

  • Area Chart

    A trend whose filled area emphasizes magnitude, with visible axes and an exact-value table.

  • Pie Chart

    A parts-of-a-whole comparison paired with a persistent legend and exact-value table.

  • Candlestick Chart

    An open-high-low-close financial series with visible axes and every exact value in a native table.

  • Scatter Chart

    A relationship between two numeric measures, with every point independently named and positioned.

  • Dumbbell Chart

    A categorical comparison that shows the start and end of every range on one line.

  • Box Plot Chart

    A distribution summary that shows minimum, quartiles, median, and maximum together.

  • Open-to-close Chart

    An ordered series that highlights the movement from each opening value to its closing value.

  • Lollipop Chart

    A categorical comparison that pairs a thin value stem with a prominent endpoint.

  • Stacked Bar Chart

    A horizontal category comparison divided into consistently ordered segments.

  • Stacked Column Chart

    A vertical category comparison divided into consistently ordered segments.

  • Histogram

    A numeric distribution grouped into adjacent equal-width ranges.

  • Heatmap

    A two-dimensional category matrix whose cells encode a numeric magnitude.

  • Sankey Chart

    A directed flow whose link widths show quantities moving between named stages.

  • Map Chart

    A caller-defined SVG map whose state paths carry values and remain keyboard reachable.

Fields

Inputs and choices that collect values.

  • Text Area

    A multi-line native text box with the same label and feedback pieces.

  • Character Count

    A live, field-linked count of how much text remains before a native length limit.

  • Mention Field

    A multi-line field that completes a token beside the caret without replacing the surrounding message.

  • Code Editor

    A small native code editor that can switch between read-only display and editing.

  • Fieldset

    A native border and name for a related set of controls.

  • Text Field

    A shared field brain that connects a label, one text input, help, and errors.

  • Password Field

    A hidden-first password input with a built-in show and hide action.

  • Search Field

    A labelled search box with an optional erase button.

  • Checkbox

    One tick box or a collection that can have several ticks.

  • Radio

    A set of choices where one choice wins.

  • Switch

    An on/off setting backed by a native checkbox.

  • Number Field

    A native number box with fully styleable step buttons.

  • Slider

    A native range control for a value along a track.

  • Pin Input

    A row of one-character fields for entering a short code.

  • Range Slider

    A two-thumb slider for choosing a range between bounds.

  • Color Field

    A labelled native color swatch that opens the browser's picker.

  • Date Field

    Native date and time inputs with the shared label and feedback pieces.

  • Tag Picker

    An editable collection that turns chosen options into removable tags.

  • Color Swatch Picker

    A compact radio group for choosing one named color chip.

  • Editable

    Plain text that turns into an input when clicked.

  • Rating

    A star scale built from hidden native radios, one per step.

Navigation

Disclosure, navigation, and collection patterns.

  • Accordion

    A stack of expandable answers.

  • Disclosure

    One button that shows or hides its own extra content.

  • Tabs

    A set of headings that swaps one panel at a time.

  • Breadcrumbs

    A trail of links showing where this page sits.

  • List Box

    A keyboard-friendly list for selecting an item.

  • Menu

    A compact list of actions opened by a button.

  • Tag Group

    A row of removable, selectable little labels.

  • Resizer

    A separator you drag or arrow to resize the thing beside it.

  • Connect

    Cards with typed inputs and outputs that people can connect, inspect, and disconnect.

  • Floating Panel

    A persistent non-modal inspector that can move, resize, overlap, and coexist with peer panels.

  • Inventory

    A uniform spatial grid whose cards can move and span more rows or columns.

  • Grid List

    A list of rows where each row can hold its own controls.

  • Table

    A native table you can walk cell by cell from the keyboard.

  • Tree Grid

    A hierarchical table where each row can expand, select, and reveal more columns.

  • Skip Link

    A hidden link that lets keyboard users jump past repeated content.

  • Context Menu

    A menu opened from a right click instead of a button.

  • Menubar

    A horizontal bar of menus that behaves like one desktop-style menu strip.

  • Tree

    A nested list where branches expand and collapse behind one tab stop.

  • Carousel

    A labelled strip of slides shown one at a time with previous and next controls.

  • Feed

    An infinite-scroll list of articles that keyboard users can page through and escape.

  • Messages

    A named message history that politely announces new messages appended at the end.

  • Pagination

    A navigation landmark that exposes the current page and page controls.

  • Timeline

    A semantic ordered list of events in chronological order.

  • Navigation Menu

    A site nav where some links unfold into small panels of more links.

  • Steps

    A numbered trail through a fixed process, showing one panel at a time.

Pickers and overlays

Choices and floating layers.

  • Select

    A button that opens a list and keeps one chosen value.

  • Combobox

    A text box that can also offer matching choices.

  • Autocomplete

    A provider that gives an existing text field a filtered collection of completions.

  • Modal

    A complete modal task composed from the Dialog primitives.

  • Dialog

    A modal layer that asks people to finish or dismiss a focused task.

  • Alert Dialog

    A modal layer for a serious decision that needs attention.

  • Popover

    A small non-modal layer attached to a trigger.

  • Tour

    A guided sequence of modal dialogs anchored to existing controls.

  • Tooltip

    A short description revealed from an existing control.

  • Calendar

    A month grid for choosing one day with the keyboard or a click.

  • Color Picker

    A custom color picker with a swatch, two-dimensional color area, hue slider, and editable hex value.

  • Date Picker

    A typed date input with a calendar popover sharing one value.

  • Time Picker

    A typed time input with a custom list of useful times.

  • Range Calendar

    A month grid that selects a start and end date as one range.

  • Date Range Picker

    Two typed date inputs and a range calendar sharing one date span.

  • Preview

    A rich card revealed by pausing on a link.

  • Drawer

    An edge-anchored modal panel that slides in and can be swiped away.