Components

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

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.

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

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.