Skip to content
comp0

comp0

Components

63 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.

  • 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.

  • 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.

Fields

Inputs and choices that collect values.

  • Text Area

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

  • 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.

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.

  • 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.

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.

  • 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.