Elements

Each page below is written from the element's source when this site is built: the attributes, properties, events, slots and parts come from the custom-elements manifest, and the examples are rendered by the real element. For what all of them share, read Using the elements.

39 elements.

Actions

• ButtonA button, or a link that looks like one when href is set.
• Theme toggleA button that switches the page between the light and dark themes.

Forms

• Base fieldThe label, help text and error message around a control.
• CheckboxA checkbox.
• Date pickerA date field with a calendar that opens beside it.
• File uploadA drop zone and file list.
• InputA single-line text field.
• RadioOne choice of a set.
• Radio groupA set of zeno-radio elements with one value, a legend and arrow-key navigation.
• SelectA field that picks one or several options from a list that opens beside it.
• SliderPicks a number from a range by dragging or with the arrow keys.
• SwitchAn on/off switch.
• TextareaA multi-line text field that can grow with its content.

Feedback

• AlertA message shown in the page, with a variant for information, success, warning and error.
• Progress barShows how much of a task is done.
• SkeletonA grey placeholder in the shape of content that is still loading.
• SpinnerShows that something is loading when its duration is not known.
• ToastA short message that appears over the page and goes away by itself.

Overlays

• DrawerA panel that slides in from an edge of the page and needs an answer before the page behind it can be used again.
• ModalA dialog in the middle of the page that needs an answer before the page behind it can be used again.
• TooltipA short text description that appears when the slotted element is hovered or focused.

Navigation

• BreadcrumbThe path from the top of the site to the current page.
• HamburgerThe three-line button that opens and closes a menu.
• Nav railA vertical navigation bar that can collapse to icons.
• PaginationMoves between the pages of a long list.
• StepperThe steps of a process and how far along it is.
• TabsA row of tabs that shows one panel at a time.

Data display

• AccordionA stack of sections that open and close.
• AvatarA picture of a person or thing, falling back to initials or an icon when there is no image.
• BadgeA count or status dot, shown on its own or on the corner of the slotted element.
• ChipA compact label for a choice, filter or attribute.
• Data tableA table of rows with sortable columns and row selection.
• IconAn icon: one of the registered shapes by name, an SVG file by src, or a slotted SVG.
• TagA small label for a category or status.

Layout

• CardA bordered surface for one subject, with optional cover, header and footer.
• ContainerCentres content and keeps it within a maximum width.
• DividerA line between sections, horizontal or vertical, with optional text.
• GridA grid layout with a column count that can change per breakpoint.
• PaperA plain surface with a background, radius and optional shadow.

Status of each element

This table is built from the test files and the notes for each element. "Its own" means the element has a test file that clicks, types and submits in a real browser. "Renders only" means the one check is that the element registers and draws. "No description" counts the properties, methods, events, slots and parts that have no description in the source yet.

Element	Form control	Browser tests	axe-core	Story	Known gaps	No description
Accordion	No	Renders only	Not checked	No	11	13 of 25
Alert	No	Renders only	Not checked	No	9	16 of 26
Avatar	No	Renders only	Not checked	No	6	18 of 23
Badge	No	Renders only	Not checked	Yes	5	10 of 14
Base field	No	Renders only	Not checked	No	9	20 of 25
Breadcrumb	No	Renders only	Not checked	No	8	13 of 18
Button	Yes	Its own	Checked	Yes	4	15 of 24
Card	No	Renders only	Not checked	No	10	23 of 30
Checkbox	Yes	Its own	Checked	Yes	4	24 of 39
Chip	No	Renders only	Not checked	No	11	13 of 19
Container	No	Renders only	Not checked	No	3	4 of 8
Data table	No	Renders only	Not checked	No	19	24 of 31
Date picker	Yes	Its own	Checked	No	10	30 of 55
Divider	No	Renders only	Not checked	No	5	9 of 13
Drawer	No	Its own	Checked	No	5	4 of 27
File upload	Yes	Its own	Checked	No	14	41 of 65
Grid	No	Renders only	Not checked	No	6	7 of 11
Hamburger	No	Renders only	Not checked	No	4	6 of 11
Icon	No	Its own	Checked	No	8	8 of 12
Input	Yes	Its own	Checked	Yes	13	38 of 59
Modal	No	Its own	Checked	No	6	4 of 26
Nav rail	No	Renders only	Not checked	No	14	19 of 28
Pagination	No	Renders only	Not checked	No	13	23 of 31
Paper	No	Renders only	Not checked	No	7	8 of 12
Progress bar	No	Renders only	Not checked	No	13	19 of 22
Radio	Yes	Its own	Checked	No	9	23 of 38
Radio group	Yes	Its own	Checked	No	10	23 of 38
Select	Yes	Its own	Checked	No	8	34 of 56
Skeleton	No	Renders only	Not checked	No	4	9 of 12
Slider	Yes	Its own	Checked	No	5	30 of 44
Spinner	No	Renders only	Not checked	No	2	8 of 11
Stepper	No	Renders only	Not checked	No	9	16 of 24
Switch	Yes	Its own	Checked	No	3	26 of 41
Tabs	No	Renders only	Not checked	No	9	13 of 19
Tag	No	Renders only	Not checked	No	7	16 of 22
Textarea	Yes	Its own	Checked	No	7	34 of 51
Theme toggle	No	Renders only	Not checked	No	8	9 of 16
Toast	No	Renders only	Not checked	No	11	18 of 28
Tooltip	No	Its own	Checked	No	6	0 of 13