An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed', with just a short label visible, or 'expanded' to show the complete content.
Accordion
62 examples
Other names: Collapsible sections, Arrow toggle, Expander, Disclosure, Details, ShowyHideyThing
Alert
73 examples
Other names: Notification, Feedback, Message, Banner
A way of informing the user of important changes in a prominent way.
Audio player
2 examples
Other names: Audio
Used for embedding a sound file in a page: usually has controls for volume, play/pause etc.
Avatar
22 examples
A graphical representation of a user: usually a photo, illustration or initial.
Breadcrumbs
33 examples
Other names: Breadcrumb trail
A list of links showing the location of the current page in the navigational hierarchy.
Button
84 examples
Buttons trigger an action such as submitting a form or showing/hiding an interface component.
Button group
22 examples
Other names: Toolbar
A wrapper for multiple, related buttons.
Card
55 examples
A container for content representing a single entity. e.g. a contact, article, or task.
Checkbox
58 examples
An input for choosing from predefined options:
- when used alone, it gives a binary choice (checked/unchecked);
- in a group it allows the user to select multiple values from a list of options.
Combobox
19 examples
Other names: Autocomplete
An input that behaves similarly to a select, with the addition of a free text input to filter options.
Date input
12 examples
A means of inputting a date – often separated into multiple individual fields for day/month/year.
Datepicker
31 examples
Other names: Datetime picker
A visual way to choose a date using a calendar view.
Dropdown menu
26 examples
Other names: Select menu
A menu in which options are hidden by default, but can be shown by interacting with a button. Differs from a select in that it shows actions or navigation options and is not a form input.
Fieldset
15 examples
A way of grouping multiple, related form fields
File
7 examples
Other names: Attachment, Download
A representation of a file such as an uploaded attachment or a downloadable PDF.
File upload
17 examples
Other names: File input, File uploader, Dropzone
An input which allows users to upload a file from their device.
Footer
18 examples
Commonly appearing at the bottom of a page or section; a footer is used to display copyright and legal information or links to related content.
Form
20 examples
A grouping of input controls that allow a user to submit information to a server.
Header
23 examples
An element that appears across the top of all pages on a website or application; it usually contains the site name and main navigation.
Heading
18 examples
A title or caption used to introduce a new section.
Hero
9 examples
Other names: Jumbotron, Banner
A large banner, usually appearing as one of the first items on a page; often contains a full-width image.
Horizontal rule
9 examples
Other names: Divider, Separator
A separator between two elements, usually consisting of a horizontal line.
Icon
28 examples
An icon is a graphic symbol designed to visually indicate the purpose of an interface element.
Image
19 examples
Other names: Picture
An element for embedding images.
Link
48 examples
Other names: Anchor, Hyperlink
A link is a reference to a resource. This can be external (e.g. a different web page) or internal (e.g. a specific element in the current document).
List
47 examples
Lists are used for grouping a collection of related items. In HTML there are three types:
- unordered list — for items in no particular order.
- ordered list — for items in a specific order.
- description list — for descriptions.
Modal
53 examples
Other names: Dialog, Popup, Modal window
A modal is an interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.
Navigation
47 examples
Other names: Nav, Menu
A container for navigation links; these can be external (e.g. main site navigation) or internal links (e.g a table of contents).
Pagination
34 examples
Pagination is the process of splitting information over multiple pages instead of showing it all on a single page; also the name for the interface component used for navigating between these pages.
Progress bar
17 examples
Other names: Progress
A horizontal bar indicating the current completion status of a long-running task, usually updated continuously as the task progresses, instead of in discrete steps.
Progress indicator
26 examples
Other names: Progress tracker, Stepper, Steps
A representation of a users progress through a series of discrete steps.
Quote
9 examples
Other names: Pull quote, Block quote
Quotes are used to display a quotation: either from a person or another outside source; or to highlight a passage of the current document (a pull quote).
Radio button
60 examples
Other names: Radio, Radio group
Radio buttons allow a user to select a single option from a list of predefined options.
Rating
8 examples
Rich text editor
2 examples
Other names: RTE, wysiwyg editor
An interface for editing “rich text” content (i.e. with formatting), usually through a WYSIWYG interface.
Search input
23 examples
Other names: Search
Search inputs allow users to find content by entering a search term.
Segmented control
9 examples
A hybrid somewhere between a button group, radio buttons and tabs; segmented controls are used to switch between different options or views.
Select
54 examples
Other names: Dropdown, Select input
A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.
Skip link
10 examples
Links within a page for skipping to another section, primarily for keyboard-only users.
Slider
24 examples
Other names: Range input
A form control for choosing a value within a preset range of values.
Spinner
41 examples
Other names: Loading
A visual indicator that something is happening, but it's not yet ready for interaction.
Stepper
7 examples
A control for editing a numeric value with buttons for decrementing / incrementing.
Table
47 examples
A component for displaying large amounts of data in rows and columns.
Tabs
51 examples
Other names: Tabbed interface
Tabbed interfaces are a way of navigating between multiple panels, reducing clutter and fitting more into a smaller space.
Text input
56 examples
A form control that accepts a single line of text.
Textarea
39 examples
Other names: Textbox, Text box
A form control for editing multi-line text.
Toast
16 examples
A type of alert, visually similar to a mobile or desktop push notification.
Toggle
32 examples
Other names: Switch, Lightswitch, Toggle button
A control used to switch between two states: often on or off.
Tooltip
59 examples
Other names: Popover
A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.
Visually hidden
8 examples
Other names: Screenreader only
Invisible text used to provide extra context for users of assistive technology.