API

Component API

Accordion

Type	Modifiers	Default	Description
Accordion	`details.accordion`	-	The root element for the accordion. Requires the `.accordion` class and optionally the `.card` class for styling.
Group	`.card[role="group"]`	-	Optional wrapper for accordion groups. To theme the entire group, apply the variant class to this element.
Attribute	`name`	-	The name of the accordion (used for grouping multiple accordions).
Part	`& > summary`, `& > .content`, `& > .actions`	-	Optional wrappers for child content.
Variants	`.text`, `.elevated`, `.tonal`, `.outlined`	`.text`	The variant to use.

Anchor

Type	Modifiers	Default	Description
Container	`.anchor`	-	Wrapper element. Provides `anchor-scope` and sets `anchor-name` on its first child.
Floating	`.anchor-floating`	-	Positioned floating element. Uses `position-anchor` and `position-area`.
Position	`--anchor-position-area`	`start end`	CSS custom property. Any valid `position-area` value.
Trigger	`data-trigger="hover"`	-	Shows floating content on hover/focus. Add `interestfor` on the trigger element pointing to the `.anchor-floating` ID.

Avatar

Type	Modifiers	Default	Description
Variants	`.squared`, `.rounded`, `.squircle`	-	Sets the shape of the avatar.

Avatar group

Type	Modifiers	Default	Description
Container	`[role="group"]`	-	Required for grouped avatars.

Badge

Type	Modifiers	Default	Description
Container	`.anchor.badge`	-	Wrapper element. Extends Anchor.
Floating	`.anchor-floating`	-	Positioned floating container from Anchor.
Indicator	`.badge-indicator`	-	The badge content element inside `.anchor-floating`.
Alignment	`.start-start`, `.start-end`, `.end-start`, `.end-end`	`.start-end`	Position modifiers on `.badge`.
Color	`.critical`, `.info`, `.neutral`, `.success`, `.warning`	-	Color modifiers on `.badge`.
Variants	`.dot`	-	Shape modifier on `.badge`.
Visibility	`.invisible`	-	Visibility modifier on `.badge`.

Button

Type	Modifiers	Default	Description
Sizes	`.small`, default, `.large`	-	The size of the element.
Variants	default, `.outlined`, `.tonal`, `.filled`	-	The variant to use.
Colors	`.critical`, `.primary`	-	Color modifiers. Default is a neutral gray.

Button Group

Type	Modifiers	Default	Description
Colors	`.critical`, `.primary`	-	Color modifiers; cascade to every button in the group. Default is a neutral gray.
Orientation	`.vertical`	-	Orientation modifier.
Sizes	`.small`, `.large`	-	Size modifiers.
Variants	`.outlined`, `.tonal`, `.filled`	-	Style modifiers.

Callout

Type	Modifiers	Default	Description
Part	`& > .content`, `& > svg`	-	Internal structure.
Severities	`.critical`, `.info`, `.primary`, `.success`, `.warning`	-	Severity modifiers.
Variants	`.tonal`, `.outlined`	`.tonal`	Style modifiers.

Card

Type	Modifiers	Default	Description
Children	`& > hgroup`, `& > .content`, `& > .actions`	-	Optional wrappers for child content.
Variants	`.text`, `.outlined`, `.tonal`, `.elevated`	`.text`	The variant to use.
Alignment	`.actions.align-end`	-	Align actions to the end.

Checkbox

Type	Modifiers	Default	Description
Children	`.label`, `.end-text`	-	Internal element classes.
Layout	`.spread`, `.stack`, default	-	The layout of the component. `.spread` pushes label and input to opposite ends. `.stack` stacks the label under the input.
Sizes	`.small`, `.large`	-	Size modifiers.
Validation	`.critical`	-	Error state modifier.
State	`data-indeterminate`	-	Marker attribute on the `<input>`. Pair with a script that sets `el.indeterminate = true` — the property is JS-only and the attribute alone has no effect.

Chip

Type	Modifiers	Default	Description
Container	`.chip`, `a.chip`, `button.chip`	-	Container element type.
Children	`& > .text`, `& > svg`	-	Optional child content.
Sizes	`.small`, default, `.multiline`	-	The size of the element.
Variants	`.tonal`, `.outlined`	`.tonal`	The variant to use.

Classic Select

Type	Modifiers	Default	Description
Sizes	`.small`	-	The size of the element.
Variants	default, `.filled`	-	The variant to use.

Description List

Type	Modifiers	Default	Description
Bordered	`.bordered`, `.bordered.dotted`	-	Adds a separator between the term and description on all items. Add `.dotted` for a dotted style.

Dialog

Type	Modifiers	Default	Description
Styles	`.dialog.card.elevated`	Included	The dialog uses card styles by default.
Closed by	`closedby` attribute	-	The attribute used to control close behavior.

Divider

Type	Modifiers	Default	Description
Variant	`.border-tonal`, `.border-filled`, `.border-primary`	-	Visual variant modifiers.

Drawer

Classes

Type	Modifiers	Default	Description
Sides	`.inline-start`, `.inline-end`, `.block-start`, `.block-end`	`.inline-start`	The side it opens from.
Close behavior	`closedby="any"`, `closedby="closerequest"`, `closedby="none"`	`closedby="any"`	How the drawer is closed.
Backdrop	`.backdrop-transparent`	-	Removes the backdrop blur.
Autofocus	`autofocus`	-	Focuses the drawer container (or a specific element) when opened. Prevents focus from jumping to the first focusable element.

Children

Class	-	-	Description
`.header`	-	-	Top area for titles.
`.content`	-	-	Main content area.
`.actions`	-	-	Bottom action area.

Field Group

Type	Modifiers	Default	Description
Children	`<legend>`, `.legend`, `.fields`, `.end-text`, checkbox, radio, switch	-	Supported child elements.
Direction	default, `.row`	-	The orientation of the element.
Disabled	`[disabled]`	-	When applied, disabled styles are shown.
Validation	`.critical`	-	When applied, error styles are shown.

Form

Type	Modifiers	Default	Description
Base	`.form`	-	The main form container.

FieldSet

Type	Modifiers	Default	Description
Base	`.fieldset`	-	The field set container.
Modifiers	`[disabled]`	-	Whether the field set is disabled.

FieldLegend

Type	Modifiers	Default	Description
Base	`.legend`, `legend`	-	The label for the field set.

Field description

Type	Modifiers	Default	Description
Base	`.field-description`	-	Field description for the field set.

FieldGroup

Type	Modifiers	Default	Description
Base	`.field-group`	-	Container for related input components.
Variants	`.row`, default	-	The orientation of the field group.

Icon Button

Type	Modifiers	Default	Description
Variants	`.outlined`, `.tonal`, `.filled`	-	The visual style of the icon button.
Sizes	`.small`	-	The size of the element.
Colors	`.critical`, `.primary`	-	Color modifiers for the icon button. Default is a neutral gray.
States	`[disabled]`	-	Attribute to disable the icon button.

List

List

Type	Modifiers	Default	Description
Dense	`ul.dense`	-	When enabled list appears tighter packed.
Gutterless	`ul.gutterless`	-	When enabled list inline padding is removed.
Bordered	`ul.bordered`	-	When enabled a border is rendered on all list items.
Variants	`ul.default`, `ul.tonal`, `ul.transparent`	-	Background color variants.

List item

Type	Modifiers	Default	Description
Main parts	`li > .start`, `li > .text`, `li > .end`	-	Building blocks in List item.
Inset	`li.inset`	-	When enabled a list item without a start icon aligns with items that do.
Border top	`li.border-top`	-	When enabled the list item will get a top border.

Progress

Type	Modifiers	Default	Description
Progress	`<progress>`	-	The native HTML progress element.
Indeterminate	No `value` attribute	-	Display an indeterminate loading state.
Variant	`.filled`, `.default`, `.tonal`	-	Modifiers for different background surfaces.

Range

Type	Modifiers	Default	Description
Input	`input[type="range"]`	-	The native range input element.
Range	`.range`	-	Wrapper for label and input styling.
Spread	`.spread`	-	Modifier for a spread layout.
Variant	`.filled`, `.default`, `.tonal`	-	Modifiers for different background surfaces.
Label	`.label`	-	The label element for the range.
Value	`output.value`	-	Optional `<output>` showing the input's current value. Use `for` to associate it with the input and an optional `data-suffix` attribute for a unit suffix.
Start text	`.start-text`	-	Optional text displayed between label and the range input (often used with spread layout).
End text	`.end-text`	-	Optional text displayed below the range input.
Spread	`.spread`	-	Modifier class to layout label and input on opposite sides.

Select

Type	Modifiers	Default	Description
Children	`.label`, `.start-text`, `.field`, `.end-text`	-	Direct children of the root element.
Field children	`<select>`, `.prefix`, `.suffix`, `.header`, `.footer`	-	Children of `.field`. The `<select>` comes first, then optional affixes.
Layout	`.spread`, default	-	The layout of the component. `.spread` pushes label and description to the left and select to the right.
Sizes	`.small`	-	The size of the element.
Variants	default, `.filled`	-	The variant to use.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.

Switch

Type	Modifiers	Default	Description
Children	`.label`, `.end-text`, `.icon-unchecked`, `.icon-checked`	-	Optional children.
Sizes	`.small`, default	-	The size of the element.
Layout	`.spread`, `.stack`, default	-	The layout of the switch. `.spread` pushes label and switch to opposite ends. `.stack` stacks the label under the switch.
Validation	`.critical`	-	When applied, error styles are shown.

Table

Type	Modifiers	Default	Description
Dense	`.dense`	-	When applied the table will appear denser.
Spacious	`.spacious`	-	When applied the table will appear more spacious.

Tabs

Tabs container

The container that organizes the tab grid.

Attribute	Value	Description
`class`	`"tabs"`	Required class for the parent container.
`role`	`"tablist"`	Required for accessibility.
`class`	`"underlined"`	Optional variant class.

Tab State (input)

A hidden radio button that manages the selection state.

Attribute	Value	Description
`type`	`"radio"`	Required for state management.
`class`	`"tab-input"`	Required for behavior and styling.
`name`	`string`	Shared across all tabs in the group.
`checked`	`boolean`	Applied to the initially active tab.
`aria-controls`	`ID`	Should match the ID of the corresponding panel.

Tab Trigger (label)

Attribute	Value	Description
`class`	`"tab-label"`	Required for behavior and styling.
`for`	`ID`	Must match the ID of the radio input.
`role`	`"tab"`	Required for accessibility.

Tab Panel (div)

Attribute	Value	Description
`class`	`"tab-panel"`	Required for behavior and styling.
`role`	`"tabpanel"`	Required for accessibility.
`aria-labelledby`	`ID`	Should match the ID of the corresponding trigger.

Text Field

Type	Modifiers	Default	Description
Auto-fit	`.auto-fit`	-	When enabled, the element changes size depending on its content.
Children	`.label`, `.start-text`, `.field`, `<datalist>`, `.end-text`	-	Direct children of the root element.
Field children	`<input>`, `<select>`, `<textarea>`, `.prefix`, `.suffix`, `.header`, `.footer`	-	Children of `.field`. The control element comes first, then optional affixes.
Layout	`.spread`, default	-	The layout of the component. `.spread` pushes label and description to the left and input to the right.
Sizes	`.small`	-	The size of the element.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.
Variants	default, `.filled`	-	The variant to use.

Text Input

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

Textarea

Type	Modifiers	Default	Description
Children	`.label`, `.start-text`, `.field`, `.end-text`	-	Direct children of the root element.
Field children	`<textarea>`, `.prefix`, `.suffix`, `.header`, `.footer`	-	Children of `.field`. The `<textarea>` comes first, then optional affixes.
Auto-fit	`.auto-fit`	-	When enabled, the element changes size depending on its content.
Layout	`.spread`, default	-	The layout of the component. `.spread` pushes label and description to the left and textarea to the right.
Variants	default, `.filled`	-	The variant to use.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.

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	`.toast`	-	Individual notification element within the container.

Toggle

Toggle Button

Type	Modifiers	Default	Description
Sizes	default, `.small`, `.x-small`	-	The size of the button.
States	`.disabled`	-	The state of the button.

Toggle Group

Type	Modifiers	Default	Description
Sizes	default, `.small`, `.x-small`	-	The size of the group. Children inherit the size if desired through CSS variables.
Children	`label.toggle-button` containing an `input[type="radio\|checkbox"]`	-	The interactive elements within the group. Visual states are driven by `input:checked`.

Type	Modifiers	Default	Description
Container	`.anchor.tooltip`	-	Wrapper element. Combines the anchor primitive with the tooltip styling.
Floating	`.anchor-floating[popover="hint"]`	-	Floating tooltip surface. Uses the `hint` popover so it auto-shows on `interestfor` hover/focus.
Trigger	`interestfor="id"`	-	Add to the trigger element pointing to the floating element's ID. Pair with `commandfor` and `command="toggle-popover"` for touch support.
Arrow	`.with-arrow`	-	Add to the `.tooltip` wrapper to render an arrow pointing from the tooltip toward the trigger.
Position	`--anchor-position-area`	`block-start`	CSS custom property. Any valid `position-area` value.