Components

177 component types
2098 matching implementations · 73 design systems
Actions

Button

Trigger an action, such as submitting a form or saving a change.

62 design systems
Inputs & selection

Text input

Let someone enter a short piece of text.

GD52 design systems
Inputs & selection

Date picker

Choose a date using a calendar. A date input without a calendar is a different pattern.

SG27 design systems
Content & disclosure

Accordion

Reveal or hide related sections of content.

53 design systems
Inputs & selection

Select

Choose an option from a predefined list. A searchable combobox is a different component.

47 design systems
Inputs & selection

Checkbox

Select one or more options, or turn an individual choice on or off.

GD50 design systems
Overlays

Modal / Dialog

Present a focused task or important information in a dialog above the page.

ÁD41 design systems
Navigation

Tabs

Switch between related panels of content.

SG45 design systems
Navigation

Back link

Return to the previous step or page.

9 design systems
Navigation

Breadcrumb

Show the current page within a hierarchy.

GD52 design systems
Inputs & selection

Character count

Show how much text can still be entered.

SG8 design systems
Feedback & status

Cookie banner

Offer choices about website cookies.

SG9 design systems
Inputs & selection

Date input

Enter a date using separate day, month and year fields.

GD26 design systems
Content & disclosure

Details

Expand a small piece of supporting information.

GDSG22 design systems
Feedback & status

Error message

Explain a problem next to the affected field.

GDSG14 design systems
Feedback & status

Error summary

Collect form errors with links to affected fields.

GDSG14 design systems
Actions

Exit this page

Leave sensitive content quickly.

SGBDGD5 design systems
Feedback & status

Feedback

Invite people to report their experience of a service.

ÁDBD9 design systems
Inputs & selection

Fieldset

Group related form fields under a shared legend.

GD23 design systems
Inputs & selection

File upload

Choose files to send with a form.

40 design systems
Page structure

Header

Identify the service and provide navigation at the top of a page.

37 design systems
Page structure

Footer

Provide supporting navigation at the end of a page.

42 design systems
Content & disclosure

Inset text

Set supporting information apart from surrounding text.

SGDL10 design systems
Showing 24 of 177