API

Component API

Accordion

Type	Modifiers	Default	Description
Grouping	`[name]`	-	Groups accordions so only one of them can be open at a time.
State	`[open]`	-	Whether the accordion is open.
Variants	default, `.ui-elevated`, `.ui-outlined`, `.ui-tonal`	default	The variant to use.

Parts

Part	Description
`details.ui-accordion`	Container element.
`<summary>`	The always visible header.
`.ui-content`	The collapsible content.
`.ui-actions`	A group of actions, such as buttons.

Add .ui-card to the root for card styles. Group accordions in a .ui-card[role="group"] and set the variant on it to theme the whole group.

Anchor

Type	Modifiers	Default	Description
Position	`--anchor-position-area`	`start end`	Any valid `position-area` value. Controls where the floating content is placed.
Trigger	default, `.ui-anchor-floating[popover="hint"]`	default	Shows the floating content always, or on hover and focus with `popover="hint"`.

Parts

Part	Description
`.ui-anchor`	Container element. Scopes the anchor to its content.
`& > :first-child`	The content the floating content is anchored to.
`.ui-anchor-floating`	The floating content.

For a hover trigger, add popover="hint" and an id to .ui-anchor-floating, and interestfor with that id to the anchor content.

Avatar

Type	Modifiers	Default	Description
Group	`[role="group"]`	-	Renders a container that groups avatars.
Variants	`.ui-rounded`, `.ui-squared`, `.ui-squircle`	-	The variant to use.

Parts

Part	Description
`.ui-avatar`	Container element.
`<img>`	The avatar image.

Badge

Type	Modifiers	Default	Description
Alignment	`.ui-end-end`, `.ui-end-start`, `.ui-start-start`, `--anchor-position-area`	-	Where the indicator is placed.
Colors	`.ui-critical`, `.ui-info`, `.ui-neutral`, `.ui-success`, `.ui-warning`	-	Optional colors.
Variants	`.ui-dot`	-	Renders the indicator as a dot, without a label.
Visibility	`.ui-invisible`	-	Hides the indicator.

Parts

Part	Description
`.ui-badge`	Container element. Also takes `.ui-anchor`.
`& > :first-child`	The element the badge is anchored to.
`.ui-badge-indicator`	The indicator, inside `.ui-anchor-floating`.

With an alignment class, also set --anchor-position-area to the same position, such as start start.

Button

Type	Modifiers	Default	Description
Colors	`.ui-critical`, `.ui-primary`	-	Optional colors.
Sizes	`.ui-large`, `.ui-small`, `.ui-x-small`	-	The size of the element.
State	`[disabled]`	-	Disables the button.
Variants	`.ui-filled`, `.ui-outlined`, `.ui-tonal`	-	The variant to use.

Parts

Part	Description
`.ui-button`	Container element.
`<svg>`	An optional icon.
`<span>`	The label.

Button Group

Type	Modifiers	Default	Description
Colors	`.ui-critical`, `.ui-primary`	-	Optional colors for the buttons.
Orientation	`.ui-vertical`	-	The orientation of the element.
Sizes	`.ui-large`, `.ui-small`	-	The size of the buttons.
Variants	`.ui-filled`, `.ui-outlined`, `.ui-tonal`	-	The variant of the buttons.

Parts

Part	Description
`.ui-button-group`	Container element.
`& > button`	The buttons.

The root needs role="group".

Callout

Type	Modifiers	Default	Description
Severities	`.ui-critical`, `.ui-info`, `.ui-neutral`, `.ui-success`, `.ui-warning`	-	The severity. Sets the color and the default icon.
Variants	default, `.ui-outlined`	default	The variant to use.

Parts

Part	Description
`.ui-callout`	Container element.
`<svg>`	An optional icon. `info`, `warning` and `critical` have a default icon.
`.ui-content`	The content.
`<h3>`	An optional title inside the content.

The root needs role="note".

Card

Type	Modifiers	Default	Description
Alignment	default, `.ui-actions.ui-align-end`	-	Alignment for the actions.
Variants	`.ui-elevated`, `.ui-outlined`, `.ui-text`, `.ui-tonal`	-	The variant to use.

Parts

Part	Description
`.ui-card`	Container element.
`<hgroup>`	The card header.
`.ui-content`	The card content.
`.ui-actions`	A group of actions, such as buttons.

Checkbox

Type	Modifiers	Default	Description
Layout	`.ui-spread`	-	Pushes the label and the input to opposite ends.
Layout	`.ui-stack`	-	Stacks the label under the input.
Sizes	`.ui-large`, `.ui-small`	-	The size of the element.
State	`input[data-indeterminate]`	-	Shows a partially checked state. Sets the `indeterminate` property on the `<input>`.
Validation	`[data-invalid]`	-	Shows error styles.

Parts

Part	Description
`label.ui-checkbox`	Container element.
`<input>`	The checkbox input.
`.ui-label`	The label.
`.ui-end-text`	Supporting text displayed below the label.

Use .ui-sr-only instead of .ui-label to hide the label visually. data-indeterminate needs checkbox.js, which sets the indeterminate property.

Chip

Type	Modifiers	Default	Description
Layout	`.ui-multiline`	-	Lets the label wrap to multiple lines.
Sizes	`.ui-small`	-	The size of the element.
Variants	`.ui-outlined`, `.ui-tonal`	`.ui-tonal`	The variant to use.

Parts

Part	Description
`.ui-chip`	Container element. Can be a `<div>`, `<a>` or `<button>`.
`<svg>`	Optional content at the start, such as an icon.
`.ui-text`	The label.
`<svg>`	Optional content at the end, such as an icon.

Classic Select

Type	Modifiers	Default	Description
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.
Variants	default, `.ui-filled`	default	The variant to use.

Parts

Part	Description
`label.ui-select`	Container element.
`.ui-label`	The label for the field.
`.ui-field`	The boxed select area.
`<select>`	A native select.
`.ui-end-text`	Supporting text displayed below the field.

Description List

Type	Modifiers	Default	Description
Bordered	`.ui-bordered`, `.ui-bordered.ui-dotted`	-	Adds a border between the term and the description.

Parts

Part	Description
`dl.ui-description-list`	Container element.
`.ui-item`	Groups a term with its description.
`<dt>`	The term.
`<dd>`	The description.

Dialog

Type	Modifiers	Default	Description
Alignment	default, `.ui-actions.ui-align-end`	-	Alignment for the actions.
Close behavior	`[closedby]`	-	How the dialog can be closed. `"any"` also closes it on a click outside.

Parts

Part	Description
`dialog.ui-dialog`	Container element.
`<hgroup>`	The dialog header.
`.ui-content`	The dialog content.
`.ui-actions`	A group of actions, such as buttons.

Add .ui-card and .ui-elevated to the root for card styles.

Divider

Type	Modifiers	Default	Description
Variants	`.ui-border-filled`, `.ui-border-primary`, `.ui-border-tonal`	-	The variant to use.

Parts

Part	Description
`hr.ui-divider`	The divider line.

Drawer

Type	Modifiers	Default	Description
Backdrop	default, `.ui-backdrop-transparent`	default	The backdrop style.
Close behavior	`[closedby]`	-	How the drawer can be closed. `"any"` also closes it on a click outside.
Scroll lock	`.ui-scroll-lock`	-	Locks page scroll while the drawer is open.
Sides	`.ui-block-end`, `.ui-block-start`, `.ui-inline-end`, `.ui-inline-start`	`.ui-inline-start`	The side it opens from.

Parts

Part	Description
`dialog.ui-drawer`	Container element.
`.ui-header`	The header. `DrawerHeader` renders it with a close button.
`.ui-content`	The scrollable content.
`.ui-footer`	The footer. `DrawerFooter` renders it.

Add autofocus to the root, or to an element inside, to choose what gets focus when it opens.

Parts

Part	Description
`.ui-header`	Container element.
`<span>`	The heading.
`<button>`	Closes the drawer.

Field Description

Parts

Part	Description
`.ui-field-description`	Supporting text for a fieldset.

Field Group

Type	Modifiers	Default	Description
Orientation	default, `.ui-row`	-	The orientation of the element.

Parts

Part	Description
`.ui-field-group`	Container element.

The root needs role="group". Wrap it in a .ui-fieldset with a <legend> to label it.

Field Legend

Parts

Part	Description
`:is(legend, .ui-legend)`	The label of a fieldset.

Field Set

Type	Modifiers	Default	Description
State	`[disabled]`	-	Disables every field inside.
Validation	`[data-invalid]`	-	Shows error styles on the fields inside.

Parts

Part	Description
`.ui-fieldset`	Container element.
`<legend>`	The label of the fieldset.
`.ui-field-description`	Supporting text displayed below the legend.

Form

Parts

Part	Description
`.ui-form`	Container element. Spaces its fieldsets and fields.

Icon Button

Type	Modifiers	Default	Description
Colors	`.ui-critical`, `.ui-primary`	-	Optional colors.
Sizes	`.ui-small`	-	The size of the element.
State	`[disabled]`	-	Disables the button.
Variants	`.ui-filled`, `.ui-outlined`, `.ui-tonal`	-	The variant to use.

Parts

Part	Description
`.ui-icon-button`	Container element.
`<svg>`	The icon.

Add aria-label to give the button an accessible name.

List

Type	Modifiers	Default	Description
Bordered	`.ui-bordered`	-	Adds a border between list items.
Dense	`.ui-dense`	-	Packs the list tighter.
Gutterless	`.ui-gutterless`	-	Removes the inline padding.
Variants	`.ui-default`, `.ui-tonal`, `.ui-transparent`	-	The background color variant.

Parts

Part	Description
`ul.ui-list`	Container element.
`<li>`	A list item.

List Item

Type	Modifiers	Default	Description
Border top	`.ui-border-top`	-	Adds a border above the item.
Controls	default, `label.ui-checkbox`, `label.ui-radio`, `label.ui-switch`	-	Wraps the content in a `<label>` for a checkbox, radio or switch.
Inset	`.ui-inset`	-	Aligns the text with items that have start content.

Parts

Part	Description
`<li>`	The list item.
`.ui-start`	Optional content at the start, such as an icon or avatar.
`.ui-text`	The text content.
`<p>`	The headline, the first paragraph.
`<p>`	Supporting text, the second paragraph.
`.ui-end`	Optional content at the end, such as a value or an action.

Wrap the content in an <a>, <button> or <label> to make the item interactive.

Progress

Type	Modifiers	Default	Description
Value	`progress[value]`	-	The current value. Omit it for an indeterminate state.
Variants	`.ui-default`, `.ui-filled`, `.ui-tonal`	-	The variant to use.

Parts

Part	Description
`.ui-progress`	Container element.
`<progress>`	The progress bar.

Radio

Type	Modifiers	Default	Description
Layout	`.ui-stack`	-	Stacks the label under the input.
Sizes	`.ui-large`, `.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.

Parts

Part	Description
`label.ui-radio`	Container element.
`<input>`	The radio input.
`.ui-label`	The label.
`.ui-end-text`	Supporting text displayed below the label.

Use .ui-sr-only instead of .ui-label to hide the label visually.

Range

Type	Modifiers	Default	Description
Layout	`.ui-spread`	-	Pushes the label and description to one side and the input to the other.
Validation	`[data-invalid]`	-	Shows error styles.
Variants	`.ui-default`, `.ui-filled`, `.ui-tonal`	-	The variant to use.

Parts

Part	Description
`label.ui-range`	Container element.
`.ui-label`	The label for the range.
`<output>`	Shows the current value, with an optional `valueSuffix`.
`.ui-start-text`	Description text displayed above the input.
`<input>`	The range input.
`.ui-end-text`	Supporting text displayed below the input.

Add a <datalist> after the input for tick marks.

Select

Type	Modifiers	Default	Description
Dense	`.ui-list.ui-dense`	-	Packs the options tighter.
Layout	`.ui-spread`	-	Pushes the label and description to one side and the select to the other.
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.
Variants	default, `.ui-filled`	default	The variant to use.

Parts

Part	Description
`label.ui-select`	Container element.
`.ui-label`	The label for the field.
`.ui-start-text`	Description text displayed above the field.
`.ui-field`	The boxed select area.
`.ui-header`	Content above the select, inside the border, with a divider.
`.ui-prefix`	Content at the inline-start of the field, inside the border.
`<select>`	The select. Its options are in a popover list.
`.ui-suffix`	Content at the inline-end of the field, inside the border.
`.ui-footer`	Content below the select, inside the border, with a divider.
`.ui-end-text`	Supporting text displayed below the field.

The <select> holds a <button> with <selectedcontent>, and a .ui-list with the options. Browsers without customizable selects show a native select.

Spinner

Type	Modifiers	Default	Description
State	`aria-busy="true"`	-	Renders a spinner pseudo-element on the element. Always indeterminate.
Sizes	`font-size` on the element	`1em`	Spinner size follows the element's computed font size.
Excluded	`<input>`, `<select>`, `<textarea>`, `<html>`, `<progress>`, elements with `aria-describedby`	-	Elements that never receive a spinner.

Switch

Type	Modifiers	Default	Description
Layout	`.ui-spread`	-	Pushes the label and the switch to opposite ends.
Layout	`.ui-stack`	-	Stacks the label under the switch.
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.

Parts

Part	Description
`label.ui-switch`	Container element.
`<input>`	The switch input.
`.ui-icon-unchecked`	An optional icon in the thumb when unchecked.
`.ui-icon-checked`	An optional icon in the thumb when checked.
`.ui-label`	The label.
`.ui-end-text`	Supporting text displayed below the label.

The input needs type="checkbox" and role="switch". Use .ui-sr-only instead of .ui-label to hide the label visually.

Table

Type	Modifiers	Default	Description
Variants	`.ui-dense`, `.ui-spacious`	-	The variant to use.

Parts

Part	Description
`table.ui-table`	Container element.
`<thead>`	The header rows.
`<th>`	A header cell.
`<tbody>`	The body rows.
`<tr>`	A row.
`<td>`	A data cell.

Tabs

Type	Modifiers	Default	Description
Group	`.ui-tab-input[name]`	-	The name shared by the tab inputs. Generated when omitted.

Parts

Part	Description
`.ui-tabs`	Container element.
`.ui-tab-input`	A visually hidden radio input that holds a tab's state.
`.ui-tab-label`	A tab.
`.ui-tab-panel`	The panel of the selected tab.

The root needs role="tablist". Each tab is an input.ui-tab-input[type="radio"], followed by its label.ui-tab-label[role="tab"] and .ui-tab-panel[role="tabpanel"].

Tabs Item

Type	Modifiers	Default	Description
State	`[checked]`	-	Selects the tab initially.

Parts

Part	Description
`input.ui-tab-input`	The radio input for a tab, followed by the tab and the panel.

Tabs Panel

Parts

Part	Description
`.ui-tab-panel`	The panel.

Tabs Tab

Parts

Part	Description
`label.ui-tab-label`	The tab.

Text Field

Type	Modifiers	Default	Description
Auto-fit	`.ui-auto-fit`	-	Changes size depending on its content.
Layout	`.ui-spread`	-	Pushes the label and description to one side and the input to the other.
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.
Variants	`.ui-filled`	-	The variant to use.

Parts

Part	Description
`label.ui-text-field`	Container element.
`.ui-label`	The label for the field.
`.ui-start-text`	Description text displayed above the field.
`.ui-field`	The boxed input area.
`.ui-header`	Content above the input, inside the border, with a divider.
`.ui-prefix`	Content at the inline-start of the field, inside the border.
`<input>`	The input element.
`.ui-suffix`	Content at the inline-end of the field, inside the border.
`.ui-footer`	Content below the input, inside the border, with a divider.
`.ui-end-text`	Supporting text displayed below the field.

The control can also be a <select> or <textarea>. A <datalist> can be placed inside the root.

Text Input

Type	Modifiers	Default	Description
Wrapper	`.ui-field`	-	The `<input>` must be wrapped in a `<span class="ui-field">` element. Border, background, and focus styling are inherited from `.ui-field`, not the input itself.
Auto-fit	`.ui-auto-fit`	-	When enabled, the element changes size depending on its content.
Sizes	`.ui-small`	-	The size of the element.
Variants	default, `.ui-filled`	-	The variant to use.

Textarea

Type	Modifiers	Default	Description
Auto-fit	`.ui-auto-fit`	-	Changes height depending on its content.
Layout	`.ui-spread`	-	Pushes the label and description to one side and the textarea to the other.
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Shows error styles.
Variants	`.ui-filled`	-	The variant to use.

Parts

Part	Description
`label.ui-textarea`	Container element.
`.ui-label`	The label for the field.
`.ui-start-text`	Description text displayed above the field.
`.ui-field`	The boxed textarea area.
`.ui-header`	Content above the textarea, inside the border, with a divider.
`.ui-prefix`	Content at the inline-start of the field, inside the border.
`<textarea>`	The textarea element.
`.ui-suffix`	Content at the inline-end of the field, inside the border.
`.ui-footer`	Content below the textarea, inside the border, with a divider.
`.ui-end-text`	Supporting text displayed below the field.

Toast

Type	Modifiers	Default	Description
Command	`--show-toast`	-	Custom invoker command to trigger a toast notification.
Message	`value` / `textContent`	-	The message to display in the toast.
Severity	`data-severity`	`info`	Modifies the toast appearance. Options: `success`, `critical`, `info`.
Duration	`data-duration`	`5000ms`	Determines how long the toast remains visible. Supports CSS time units (ms, s).
Container	`#toast-manager`	-	The global fixed container that manages the stack of toasts.
Component	`.ui-toast`	-	Individual notification element within the container.

Toggle Button

Type	Modifiers	Default	Description
Sizes	`.ui-small`, `.ui-x-small`	-	The size of the element.
State	`.ui-disabled`	-	Disables the button.
State	`input[checked]`	-	Selects the button.
Type	`input[type="checkbox"]`, `input[type="radio"]`	`input[type="checkbox"]`	The input type. `"radio"` allows one selection in a group.

Parts

Part	Description
`label.ui-toggle-button`	Container element.
`<input>`	A visually hidden checkbox or radio input.

Set disabled on the input too. Checkbox inputs also need aria-pressed.

Toggle Group

Type	Modifiers	Default	Description
Orientation	`.ui-vertical`	-	The orientation of the element.
Selection	`[role="group"]`, `[role="radiogroup"]`	`[role="group"]`	Whether one or several buttons can be selected. `"single"` uses radio inputs.
Sizes	default, `.ui-small`, `.ui-x-small`	default	The size of the buttons.

Parts

Part	Description
`.ui-toggle-group`	Container element.
`.ui-toggle-button`	A toggle button.

Type	Modifiers	Default	Description
Arrow	`.ui-with-arrow`	-	Adds an arrow that points to the trigger.
Position	`--anchor-position-area`	`block-start`	Any valid `position-area` value. Controls where the tooltip is placed.

Parts

Part	Description
`.ui-tooltip`	Container element.
`& > :first-child`	The trigger that shows the tooltip on hover and focus.
`.ui-anchor-floating`	The tooltip, a `popover="hint"`.

Also add .ui-anchor to the root. Give .ui-anchor-floating popover="hint" and an id, and add interestfor with that id to the trigger.

Typography

Type	Modifiers	Default	Description
Headings	`.ui-h1`, `.ui-h2`, `.ui-h3`, `.ui-h4`, `.ui-h5`, `.ui-h6`	-	Heading styles for any element.
Paragraph	`.ui-p`	-	Body paragraph styling.
Sizes	`.ui-small`, `.ui-large`	-	Size modifiers on `.ui-p`.
Overline	`.ui-overline`	-	Small uppercase label text.
Caption	`.ui-caption`	-	Muted supporting text.
Heading group	`.ui-hgroup`	-	Groups an overline, heading, and optional body copy.
Blockquote	`.ui-blockquote`	-	Quoted block with a start border.
Code block	`pre.ui-code-block`	-	Monospace preformatted block.
Inline	`.ui-abbr`, `.ui-cite`, `.ui-del`, `.ui-dfn`, `.ui-ins`, `.ui-kbd`, `.ui-mark`, `.ui-s`, `.ui-samp`, `.ui-small`, `.ui-sub`, `.ui-sup`, `.ui-u`, `.ui-var`	-	Inline text element utilities.
Rich text	`.ui-rich-text`	-	Classless typography for uncontrolled child markup.