API

Component API

Accordion

Prop	Type	Default	Description
Group	`Card[role="group"]`	-	Optional wrapper for accordion groups. To theme the entire group, apply the `variant` prop to this component.
`name`	`string`	-	The name of the accordion (used for grouping multiple accordions). Works best when wrapped in a `Card` with `role="group"`.
`open`	`boolean`	`false`	Accordion open state.
`variant`	`"default" \| "outlined" \| "elevated" \| "tonal"`	`"default"`	The visual variant of the accordion.

Anchor

Prop	Type	Default	Description
`alignment`	`string`	`"start end"`	Any valid `position-area` value. Controls where the floating content is placed.
`trigger`	`"always" \| "hover"`	`"always"`	When set to `"hover"`, wraps the anchor slot in an `interestfor` invoker and uses `popover="hint"` on the floating element.

Avatar

Prop	Type	Default	Description
`as`	`any`	-	The element or component to render as.
`href`	`string`	-	The link to use if the avatar is an anchor.
`variant`	`"squared" \| "rounded" \| "squircle"`	`"default"`	The visual style of the avatar.
`isGroup`	`boolean`	`false`	Renders the avatar as a group.
`src`	`string`	-	The image source for the avatar.
`alt`	`string`	-	The alternative text for the avatar image.

Badge

Prop	Type	Default	Description
`alignment`	`"start-start" \| "start-end" \| "end-start" \| "end-end"`	`"start-end"`	Position of the badge relative to its container.
`color`	`"critical" \| "ok" \| "good" \| "warning"`	-	The color variant of the badge.
`dot`	`boolean`	`false`	Renders the badge as a simple dot.
`invisible`	`boolean`	`false`	Hides the badge.
`label`	`string \| number`	-	Screen reader label for the badge.

Button

Prop	Type	Default	Description
`size`	`"small"`, `"large"`	-	The size of the button.
`variant`	`"outlined"`, `"tonal"`, `"filled"`	-	The visual variant of the button.
`color`	`"critical"`, `"primary"`	-	The color of the button. Default is a neutral gray.
`href`	`string`	-	Renders as an tag if an href is provided.
`disabled`	`boolean`	-	Button disabled state.

Button Group

Prop	Type	Default	Description
`color`	`"critical"`, `"primary"`	-	Color of every button in the group. Default is a neutral gray.
`orientation`	`"vertical"`	-	The layout orientation of the group.
`size`	`"small" \| "large"`	-	The size of the buttons in the group.
`variant`	`"outlined" \| "tonal" \| "filled"`	-	The visual style of the buttons in the group.

Callout

Prop	Type	Default	Description
`variant`	`"tonal" \| "outlined"`	`"tonal"`	The visual style of the callout.
`severity`	`"ok" \| "warning" \| "critical"`	-	The severity level, affecting the color and icon.

Card

Prop	Type	Default	Description
Slots	`header`, `content`, `actions`, `default`	-	Optional slots.
`variant`	`"text"`, `"outlined"`, `"tonal"`, `"elevated"`	`"text"`	The variant to use.
`actions`	`{ align: "end" }`	-	Alignment for the `actions` slot.

Checkbox

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Input checked state.
`disabled`	`boolean`	-	Input disabled state.
`critical`	`boolean`	-	Input error state.
`hideLabel`	`boolean`	-	Visually hides the label.
`indeterminate`	`boolean`	`false`	Visual partial-selection state. Applied via JS at runtime; does not affect form submission.
`required`	`boolean`	`false`	Input required state.
`size`	`"small" \| "large"`	-	The size of the input.
`spread`	`boolean`	`false`	Spreads the label and input to opposite ends.
`stack`	`boolean`	`false`	Stacks the label under the input.

Slots

Slot	Description
`default`	The label text for the component.
`end-text`	Optional supporting text displayed after the label.

Chip

Prop	Type	Default	Description
`as`	`"div" \| "a" \| "button"`	`"div"` (or `"a"` if `href` present)	The underlying HTML element.
`label`	`string`	-	The text label to display.
`multiline`	`boolean`	`false`	Allows multiline text.
`size`	`"small"`	-	The size of the chip.
`variant`	`"tonal" \| "outlined"`	`"tonal"`	The visual variant.

Classic Select

Prop	Type	Default	Description
`disabled`	`boolean`	-	Select disabled state.
`critical`	`boolean`	-	Select error state.
`items`	`Item[]`	`[]`	An array of objects with `text` and `value` properties.
`label`	`string`	-	The label for the select.
`required`	`boolean`	-	Select required state.
`size`	`"small"`	-	The size of the select.
`variant`	`"outlined" \| "filled"`	`"outlined"`	The visual variant of the select.

Description List

Prop	Type	Default	Description
`bordered`	`boolean \| "dotted"`	-	Adds a separator between the term and description on all items. Use `"dotted"` for a dotted style.
`class`	`string`	-	Custom CSS classes.

DescriptionList.Item

Prop	Type	Default	Description
`class`	`string`	-	Custom CSS classes.

DescriptionList.Term

Prop	Type	Default	Description
`class`	`string`	-	Custom CSS classes.

DescriptionList.Description

Prop	Type	Default	Description
`class`	`string`	-	Custom CSS classes.

Dialog

Props

Prop	Type	Default	Description
`closedby`	`"any" \| "closerequest" \| "none"`	-	Specifies how the dialog can be closed (e.g., clicking outside).
`actions.align`	`"end"`	-	Alignment of the actions slot.

Slots

Slot	Description
`header`	The header content, wrapped in an `hgroup`.
`content`	The main content, wrapped in a `div` with a `content` class.
`actions`	The footer actions, wrapped in a `div` with an `actions` class.
`default`	Any content not assigned to a named slot.

Divider

Prop	Type	Default	Description
`variant`	`"tonal" \| "filled" \| "primary"`	-	The visual variant of the divider.

Drawer

Props

Prop	Type	Default	Description
`id`	`string`	auto-generated	Unique identifier. Defaults to a stable auto-generated id when omitted.
`side`	`"inline-start"`, `"inline-end"`, `"block-start"`, `"block-end"`	`"inline-start"`	The side it opens from.
`backdrop`	`"transparent"`, `"blurred"`	`"blurred"`	The backdrop style.
`scrollLock`	`boolean`	`true`	Whether to lock page scroll.
`class`	`string`	-	Optional CSS class.
`closedby`	`"any"`, `"closerequest"`, `"none"`	`"any"`	How the drawer is closed.

Slots

Slot	-	-	Description
`heading`	-	-	The drawer title.
`default`	-	-	Main content area.
`actions`	-	-	Bottom action area.

actions The bottom actions area, wrapped in a div with an actions class.

Field Group

Prop	Type	Default	Description
`critical`	`boolean`	`false`	Field group error state.
`legend`	`string`	-	The text for the legend element.
`direction`	`"row"`	-	The orientation of the field group.

Form

Prop	Type	Default	Description
`as`	`string`	`"form"`	The HTML element to render.

FieldSet

Prop	Type	Default	Description
`as`	`"fieldset"`, `"div"`	`"fieldset"`	The HTML element to render.
`disabled`	`boolean`	-	Whether the field set is disabled.

FieldLegend

Prop	Type	Default	Description
`as`	`"legend"`, `"p"`, `"div"`, `"span"`	`"legend"`	The HTML element to render.

FieldDescription

Prop	Type	Default	Description
-	`[key: string]: any`	-	Field description for the field set. Accepts standard HTML attributes.

FieldGroup

Prop	Type	Default	Description
`name`	`string`	-	Shared name for nested input components.
`direction`	`"row"`, `"column"`	-	The orientation of the field group.

Icon Button

Prop	Type	Default	Description
`as`	`any`	`"button"` (or `"a"` if `href` present)	The underlying HTML element.
`href`	`string`	-	Renders as an tag if an href is provided.
`size`	`"small"`	-	The size of the icon button.
`color`	`"critical"`, `"primary"`	-	The color of the icon button. Default is a neutral gray.
`variant`	`"outlined"` \| `"tonal"` \| `"filled"`	-	The style of the icon button.
`disabled`	`boolean`	-	Whether the icon button is disabled.

List

Prop	Type	Default	Description
`bordered`	`boolean`	`false`	Adds a border between list items.
`dense`	`boolean`	`false`	Packs the list tighter.
`gutterless`	`boolean`	`false`	Removes list inline padding.
`variant`	`"default" \| "tonal" \| "transparent"`	-	The background color variant of the list.

List item

Prop	Type	Default	Description
`as`	`string`	-	Renders an inner element of the given tag (e.g. `"a"`, `"button"`). All extra props are forwarded to it, so any HTML attribute is supported without enumeration.
`borderTop`	`boolean`	`false`	List item top border.
`headline`	`string`	-	The main text for the list item.
`inset`	`boolean`	`false`	Aligns with items that have a start icon.
`supportingText`	`string`	-	Extra text displayed below the headline.

Progress

Prop	Type	Default	Description
`value`	`number \| string`	-	The current value of the progress bar.
`max`	`number \| string`	-	The maximum value of the progress bar.
`aria-busy`	`"true" \| "false" \| boolean`	-	Indicates that the element or its content is being modified.
`aria-label`	`string`	-	Accessible label for the progress bar.
`variant`	`'filled' \| 'default' \| 'tonal'`	`'default'`	Adjusts the progress bar background color for better contrast on different surfaces.

Range

Prop	Type	Default	Description
`label`	`string`	-	The label for the range input.
`startText`	`string`	-	Informational text between label and the range input.
`endText`	`string`	-	Informational text below the range input.
`spread`	`boolean`	`false`	Spreads the label/text and input to opposite ends.
`variant`	`'filled' \| 'default' \| 'tonal'`	`'default'`	Adjusts the track color for better contrast on different surfaces.
`min`	`number \| string`	-	The minimum value.
`max`	`number \| string`	-	The maximum value.
`step`	`number \| string`	-	The step increment.
`value`	`number \| string`	-	The current value.
`valueSuffix`	`string`	-	Renders a live `<output>` next to the label showing the current input value. The suffix (e.g. `°`, `px`) is appended to the value and the component keeps the readout in sync on every `input` event.

Slots

Slot	Description
`default`	Slot for the label element.
`start-text`	Slot for the text between label and input.
`end-text`	Slot for the text below the input.
`value`	Custom content for the live value readout. When set, replaces the default rendering of the `value` prop inside `<output>`. The auto-update script still mirrors the input's value into the element's text content.

Select

Prop	Type	Default	Description
`dense`	`boolean`	`false`	Select dense state.
`disabled`	`boolean`	-	Select disabled state.
`description`	`string`	-	Description text displayed above the select.
`endText`	`string`	-	Supporting text displayed below the select.
`critical`	`boolean`	-	Select error state. Sets `[data-invalid]` on the root element.
`items`	`Item[]`	`[]`	An array of objects with `text` and `value` properties.
`label`	`string`	-	The label for the select.
`required`	`boolean`	-	Select required state.
`size`	`"small"`	-	The size of the select.
`spread`	`boolean`	`false`	Spreads the label/description and select to opposite ends.
`variant`	`"outlined" \| "filled"`	`"outlined"`	The visual variant of the select.

Slots

Slot	Description
`default`	Alternative way to define options (using `<option>` elements).
`label`	Slot for the label element.
`description`	Slot for the description (start text) element, displayed above the field.
`prefix`	Content placed at the inline-start of the field, inside the border.
`suffix`	Content placed at the inline-end of the field, inside the border.
`header`	Content placed above the select, inside the border, with a divider.
`footer`	Content placed below the select, inside the border, with a divider.
`end-text`	Slot for the supporting text (end text) element.

Switch

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessible name for the switch. Use when there's no visible label (ex icon-only switches).
`aria-labelledby`	`string`	-	ID of an external element that labels the switch.
`checked`	`boolean`	`false`	Whether the switch is checked.
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`critical`	`boolean`	`false`	Switch error state.
`hideLabel`	`boolean`	`false`	Visually hides the label but keeps it accessible.
`required`	`boolean`	`false`	Whether the switch is required.
`small`	`boolean`	`false`	Reduces the size of the switch.
`spread`	`boolean`	`false`	Spreads the label and switch to opposite ends.
`stack`	`boolean`	`false`	Labels are stacked under the element.

Slots

Slot	Description
`default`	The label text for the switch.
`end-text`	Optional supporting text displayed after the label.

Table

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the table.
`variant`	`"dense" \| "spacious"`	-	The variant to use.

Tabs

The main container for the tab items.

Prop	Type	Default	Description
`class`	`string`	-	Optional class name (e.g., `"underlined"`).
`name`	`string`	`"tabs-XXXX"`	A unique name for the exclusive group. Shared with all children.

Tabs.Item

A logical grouping for a tab trigger and its content. Handles state synchronization.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether this tab is initially active.

Tabs.Tab

The visible trigger for the tab.

Prop	Type	Default	Description
`class`	`string`	-	Optional class name.

Tabs.Panel

The content area for the tab.

Prop	Type	Default	Description
`class`	`string`	-	Optional class name.

Text Field

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Automatically adjusts its width to content.
`description`	`string`	-	Description text displayed above the field.
`critical`	`boolean`	`false`	Field error state. Sets `[data-invalid]` on the root element.
`label`	`string`	-	The label for the field.
`size`	`"small"`	-	The size of the field.
`spread`	`boolean`	`false`	Spreads the label/description and input to opposite ends.
`endText`	`string`	-	Supporting text displayed below the field.
`variant`	`"filled"`	-	The visual variant of the field.

Slots

Slot	Description
`label`	Slot for the label element.
`description`	Slot for the description (start text) element, displayed above the field.
`prefix`	Content placed at the inline-start of the field, inside the border.
`suffix`	Content placed at the inline-end of the field, inside the border.
`header`	Content placed above the input, inside the border, with a divider.
`footer`	Content placed below the input, inside the border, with a divider.
`end-text`	Slot for the supporting text (end text) element.
`supporting-text`	Legacy slot for the supporting text element.

Text Input

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Automatically adjusts its width to content.
`size`	`"small"`	-	The size of the text field.
`variant`	`"filled"`	-	The visual variant of the text field.

Textarea

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Automatically adjusts its height to content.
`description`	`string`	-	Description text displayed above the textarea.
`endText`	`string`	-	Supporting text displayed below the textarea.
`spread`	`boolean`	`false`	Spreads the label/description and textarea to opposite ends.
`variant`	`"filled"`	-	The visual variant of the textarea.

Slots

Slot	Description
`label`	Slot for the label element.
`description`	Slot for the description (start text) element, displayed above the field.
`prefix`	Content placed at the inline-start of the field, inside the border.
`suffix`	Content placed at the inline-end of the field, inside the border.
`header`	Content placed above the textarea, inside the border, with a divider.
`footer`	Content placed below the textarea, inside the border, with a divider.
`end-text`	Slot for the supporting text (end text) element.
`supporting-text`	Legacy slot for the supporting text element.

Toast

The Toast component does not accept any props as it is a global manager container.

Toggle

Toggle Button

Individual toggle button component.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the toggle button is disabled.
`label`	`string`	-	The label text for the toggle button.
`name`	`string`	-	The name of the input element. Inherited from ToggleGroup if used within one.
`pressed`	`boolean`	`false`	Whether the toggle button is pressed. Maps to `aria-pressed` in checkbox mode and to `checked` on the underlying input.
`size`	`"default" \| "small" \| "x-small"`	`"default"`	The size of the toggle button.
`type`	`"checkbox" \| "radio"`	`"checkbox"`	The type of input element. Inherited from ToggleGroup (driven by the `selection` prop) if used within one.
`value`	`string`	-	The value attribute of the input element. Defaults to `label` if not provided.

Toggle Group

Container for grouping multiple toggle buttons.

Prop	Type	Default	Description
`name`	`string`	-	The name property for child inputs. Used for native form submission.
`size`	`"default" \| "small" \| "x-small"`	`"default"`	The size of the toggle group.
`orientation`	`"vertical"`	-	Changes the layout direction of the group.
`selection`	`"single" \| "multiple"`	`"multiple"`	The selection mode. `"single"` maps to radio inputs; `"multiple"` maps to checkbox inputs.

Prop	Type	Default	Description
`alignment`	`string`	`"block-start"`	Any valid `position-area` value. Controls where the tooltip is placed relative to the trigger.
`arrow`	`boolean`	`false`	When `true`, renders an arrow pointing from the tooltip toward the trigger. The arrow flips automatically with the tooltip via `position-try-fallbacks`.
`id`	`string`	auto-generated	Identifier used to wire `interestfor` on the trigger to the floating element.
`label`	`string`	—	Plain-text tooltip content. For richer markup, use the `content` slot instead.