API

Component API

Accordion

Prop	Type	Default	Description
`name`	`string`	-	Groups accordions so only one of them can be open at a time.
`open`	`boolean`	`false`	Whether the accordion is open.
`variant`	`"default"`, `"outlined"`, `"elevated"`, `"tonal"`	`"default"`	The variant to use.

Slots

Slot	Description
`actions`	A group of actions, such as buttons.
`default`	The collapsible content.
`marker`	A custom marker that replaces the native one.
`summary`	The always visible header.

Group accordions in a <Card role="group">. Set its variant to theme the whole group.

Anchor

Prop	Type	Default	Description
`alignment`	`string`	`"start end"`	Any valid `position-area` value. Controls where the floating content is placed.
`id`	`string`	-	The id of the floating content when `trigger` is `"hover"`. Add `interestfor` with the same id to the trigger.
`trigger`	`"always"`, `"hover"`	`"always"`	Shows the floating content always, or on hover and focus with `popover="hint"`.

Slots

Slot	Description
`anchored`	The floating content.
`default`	The content the floating content is anchored to.

Avatar

Prop	Type	Default	Description
`alt`	`string`	-	Alternative text for the image.
`as`	`"div"`, `"button"`, `"a"`	-	The element to render. Defaults to `"a"` with `href`, otherwise `"div"`.
`command`	`string`	-	The command to send to the `commandfor` target.
`commandfor`	`string`	-	The id of the element the command targets.
`disabled`	`boolean`	-	Disables the avatar when `as` is `"button"`.
`href`	`string`	-	The link to use. Renders an `<a>`.
`interestfor`	`string`	-	The id of the element to show on interest.
`isGroup`	`boolean`	`false`	Renders a container that groups avatars.
`src`	`string`	-	The image source. Replaces the default slot.
`variant`	`"squared"`, `"rounded"`, `"squircle"`	-	The variant to use.

Slots

Slot	Description
`default`	Letters or an icon, when there's no image.

Badge

Prop	Type	Default	Description
`alignment`	`"start-start"`, `"end-start"`, `"end-end"`	-	Where the indicator is placed.
`color`	`"critical"`, `"info"`, `"neutral"`, `"success"`, `"warning"`	-	Optional colors.
`dot`	`boolean`	`false`	Renders the indicator as a dot, without a label.
`invisible`	`boolean`	`false`	Hides the indicator.
`label`	`string`, `number`	-	The indicator, inside `.ui-anchor-floating`.

Slots

Slot	Description
`default`	The element the badge is anchored to.
`indicator`	The indicator, inside `.ui-anchor-floating`.

Button

Prop	Type	Default	Description
`as`	`"button"`, `"a"`	-	The element to render. Defaults to `"a"` with `href`, otherwise `"button"`.
`color`	`"critical"`, `"primary"`	-	Optional colors.
`disabled`	`boolean`	`false`	Disables the button.
`href`	`string`	-	The link to use. Renders an `<a>`.
`size`	`"x-small"`, `"small"`, `"large"`	-	The size of the element.
`variant`	`"outlined"`, `"tonal"`, `"filled"`	-	The variant to use.

Slots

Slot	Description
`default`	The label and an optional icon.

Button Group

Prop	Type	Default	Description
`color`	`"critical"`, `"primary"`	-	Optional colors for the buttons.
`orientation`	`"vertical"`	-	The orientation of the element.
`size`	`"small"`, `"large"`	-	The size of the buttons.
`variant`	`"outlined"`, `"tonal"`, `"filled"`	-	The variant of the buttons.

Slots

Slot	Description
`default`	The buttons.

Callout

Prop	Type	Default	Description
`severity`	`"critical"`, `"info"`, `"neutral"`, `"success"`, `"warning"`	-	The severity. Sets the color and the default icon.
`variant`	`"outlined"`, `"tonal"`	`"tonal"`	The variant to use.

Slots

Slot	Description
`default`	The content.
`icon`	An optional icon. `info`, `warning` and `critical` have a default icon.
`title`	An optional title inside the content.

Card

Prop	Type	Default	Description
`actionsAlign`	`"start"`, `"end"`	-	Alignment for the actions.
`variant`	`"outlined"`, `"elevated"`, `"tonal"`, `"text"`	-	The variant to use.

Slots

Slot	Description
`actions`	A group of actions, such as buttons.
`content`	The card content.
`default`	Raw content placed directly in the card.
`header`	The card header.

Checkbox

Prop	Type	Default	Description
`error`	`boolean`	`false`	Shows error styles.
`hideLabel`	`boolean`	`false`	Visually hides the label.
`indeterminate`	`boolean`	`false`	Shows a partially checked state. Sets the `indeterminate` property on the `<input>`.
`size`	`"small"`, `"large"`	-	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and the input to opposite ends.
`stack`	`boolean`	`false`	Stacks the label under the input.
`v-model`	`boolean`, `(string`, `number)[]`	-	The checked state, or the checked values of a group.

Slots

Slot	Description
`default`	The label.
`end-text`	Supporting text displayed below the label.

Attributes that aren't props, such as disabled or name, go to the <input>.

Chip

Prop	Type	Default	Description
`as`	`string`	`"div"`	The element to render. Defaults to `"a"` with `href`.
`label`	`string`	-	The label.
`multiline`	`boolean`	`false`	Lets the label wrap to multiple lines.
`size`	`"small"`	-	The size of the element.
`variant`	`"outlined"`, `"tonal"`	`"tonal"`	The variant to use.

Slots

Slot	Description
`default`	Content placed before the label.
`end`	Optional content at the end, such as an icon.
`start`	Optional content at the start, such as an icon.

Classic Select

Prop	Type	Default	Description
`endText`	`string`	-	Supporting text displayed below the field.
`error`	`boolean`	`false`	Shows error styles.
`id`	`string`	-	The id of the `<select>`. Generated when omitted.
`items`	`Item[]`	`[]`	The options, as `{ text, value }` objects.
`label`	`string`	-	The label for the field.
`size`	`"small"`	-	The size of the element.
`v-model`	`string`, `number`, `(string`, `number)[]`	-	The selected value, or values with `multiple`.
`variant`	`"outlined"`, `"filled"`	`"outlined"`	The variant to use.

Slots

Slot	Description
`default`	Extra `<option>` and `<optgroup>` elements.

Attributes that aren't props, such as disabled or name, go to the <select>.

Description List

Prop	Type	Default	Description
`bordered`	`boolean`, `"dotted"`	`false`	Adds a border between the term and the description.

Slots

Slot	Description
`default`	The items.

Dialog

Prop	Type	Default	Description
`actionsAlign`	`"start"`, `"end"`	-	Alignment for the actions.
`closedby`	`"any"`, `"closerequest"`, `"none"`	-	How the dialog can be closed. `"any"` also closes it on a click outside.

Slots

Slot	Description
`actions`	A group of actions, such as buttons.
`content`	The dialog content.
`default`	Raw content placed directly in the dialog.
`header`	The dialog header.

Attributes that aren't props, such as closedby or id, go to the <dialog>.

Divider

Prop	Type	Default	Description
`variant`	`"tonal"`, `"primary"`, `"filled"`	-	The variant to use.

Drawer

Prop	Type	Default	Description
`backdrop`	`"transparent"`, `"blurred"`	`"blurred"`	The backdrop style.
`closedby`	`"none"`, `"any"`, `"closerequest"`	`"any"`	How the drawer can be closed. `"any"` also closes it on a click outside.
`id`	`string`	-	The id of the `<dialog>`. Generated when omitted.
`scrollLock`	`boolean`	`true`	Locks page scroll while the drawer is open.
`side`	`"inline-start"`, `"inline-end"`, `"block-start"`, `"block-end"`	`"inline-start"`	The side it opens from.

Slots

Slot	Description
`content`	The scrollable content.
`default`	Raw content placed directly in the drawer.
`footer`	The footer. `DrawerFooter` renders it.
`header`	The header. `DrawerHeader` renders it with a close button.

Attributes that aren't props go to the <dialog>.

Prop	Type	Default	Description
`heading`	`string`	-	The heading.

Slots

Slot	Description
`default`	Content placed between the heading and the close button.

Field Description

Slots

Slot	Description
`default`	The text.

Field Group

Prop	Type	Default	Description
`direction`	`"row"`, `"column"`	-	The orientation of the element.
`name`	`string`	-	Sets `name` on every input, select and textarea inside.

Slots

Slot	Description
`default`	The fields, such as checkboxes, radios or switches.

Field Legend

Prop	Type	Default	Description
`as`	`string`	`"legend"`	The element to render. Adds `.ui-legend` when not `"legend"`.

Slots

Slot	Description
`default`	The label.

Field Set

Prop	Type	Default	Description
`as`	`string`	`"fieldset"`	The element to render.
`disabled`	`boolean`	`false`	Disables every field inside.

Slots

Slot	Description
`default`	The legend, description and fields.

Form

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

Slots

Slot	Description
`default`	The fieldsets and fields.

Icon Button

Prop	Type	Default	Description
`as`	`"button"`, `"a"`	-	The element to render. Defaults to `"a"` with `href`, otherwise `"button"`.
`color`	`"critical"`, `"primary"`	-	Optional colors.
`disabled`	`boolean`	`false`	Disables the button.
`href`	`string`	-	The link to use. Renders an `<a>`.
`size`	`"small"`	-	The size of the element.
`variant`	`"outlined"`, `"tonal"`, `"filled"`	-	The variant to use.

Slots

Slot	Description
`default`	The icon.

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

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 the inline padding.
`variant`	`"default"`, `"tonal"`, `"transparent"`	-	The background color variant.

Slots

Slot	Description
`default`	The list items.

List Item

Prop	Type	Default	Description
`as`	`string`	-	The element to render inside the `<li>`, such as `"a"` or `"button"`.
`borderTop`	`boolean`	`false`	Adds a border above the item.
`description`	`string`	-	Supporting text, the second paragraph.
`for`	`string`	-	The `for` attribute of the `<label>` when `type` is set.
`headline`	`string`	-	The headline, the first paragraph.
`href`	`string`	-	The link to use, with `as="a"`.
`inset`	`boolean`	`false`	Aligns the text with items that have start content.
`type`	`"button"`, `"checkbox"`, `"radio"`, `"switch"`	-	Wraps the content in a `<label>` for a checkbox, radio or switch.

Slots

Slot	Description
`default`	Extra content inside `.ui-text`, or all the content when there's no text.
`end`	Optional content at the end, such as a value or an action.
`start`	Optional content at the start, such as an icon or avatar.
`text`	The text content.

Progress

Prop	Type	Default	Description
`aria-busy`	`boolean`, `"true"`, `"false"`	-	Whether the progress is busy. Passed to the `<progress>`.
`aria-describedby`	`string`	-	The id of an element that describes the progress. Passed to the `<progress>`.
`aria-label`	`string`	-	The accessible label. Passed to the `<progress>`.
`id`	`string`	-	The id of the `<progress>`.
`max`	`string`, `number`	-	The maximum value.
`value`	`string`, `number`	-	The current value. Omit it for an indeterminate state.
`variant`	`"default"`, `"tonal"`, `"filled"`	-	The variant to use.

Slots

Slot	Description
`default`	Fallback content inside the `<progress>`.

Attributes that aren't props also go to the <progress>.

Radio

Prop	Type	Default	Description
`error`	`boolean`	`false`	Shows error styles.
`hideLabel`	`boolean`	`false`	Visually hides the label.
`size`	`"small"`, `"large"`	-	The size of the element.
`stack`	`boolean`	`false`	Stacks the label under the input.
`v-model`	`string`, `number`, `boolean`	-	The selected value of the group.

Slots

Slot	Description
`default`	The label.
`end-text`	Supporting text displayed below the label.

Attributes that aren't props, such as disabled, name or value, go to the <input>.

Range

Prop	Type	Default	Description
`endText`	`string`	-	Supporting text displayed below the input.
`error`	`boolean`	`false`	Shows error styles.
`id`	`string`	-	The id of the `<input>`. Generated when omitted and the value is shown.
`label`	`string`	-	The label for the range.
`list`	`string`	-	The id of the `<datalist>`. Needed with `options`.
`options`	`(string`, `number`, `{ value: string`, `number; label?: string`, `undefined; })[]`	-	Tick marks, rendered as `<option>` elements in a `<datalist>`.
`spread`	`boolean`	`false`	Pushes the label and description to one side and the input to the other.
`startText`	`string`	-	Description text displayed above the input.
`v-model`	`number`, `string`	-	The current value.
`value`	`number`, `string`	-	The current value.
`valueSuffix`	`string`	-	Shows the current value, with an optional `valueSuffix`.
`variant`	`"default"`, `"tonal"`, `"filled"`	-	The variant to use.

Slots

Slot	Description
`datalist`	Extra `<option>` elements for the `<datalist>`.
`default`	The label for the range.
`end-text`	Supporting text displayed below the input.
`start-text`	Description text displayed above the input.
`value`	Shows the current value, with an optional `valueSuffix`.

Attributes that aren't props, such as max, min or step, go to the <input>.

Select

Prop	Type	Default	Description
`dense`	`boolean`	`false`	Packs the options tighter.
`description`	`string`	-	Description text displayed above the field.
`endText`	`string`	-	Supporting text displayed below the field.
`error`	`boolean`	`false`	Shows error styles.
`id`	`string`	-	The id of the `<select>`.
`items`	`Item[]`	`[]`	The options, as `{ text, value }` objects.
`label`	`string`	-	The label for the field.
`size`	`"small"`	-	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and description to one side and the select to the other.
`v-model`	`string`, `number`, `(string`, `number)[]`	-	The selected value, or values with `multiple`.
`variant`	`"outlined"`, `"filled"`	`"outlined"`	The variant to use.

Slots

Slot	Description
`default`	Extra `<option>` and `<optgroup>` elements.
`description`	Description text displayed above the field.
`end-text`	Supporting text displayed below the field.
`footer`	Content below the select, inside the border, with a divider.
`header`	Content above the select, inside the border, with a divider.
`label`	The label for the field.
`prefix`	Content at the inline-start of the field, inside the border.
`suffix`	Content at the inline-end of the field, inside the border.

Attributes that aren't props, such as disabled or name, go to the <select>.

Spinner

Prop	Type	Default	Description
`aria-busy`	`"true"`, `"false"`, `boolean`	-	Set on any element to show a spinner. CSS-only; no Astro component.
Sizes	`font-size`	`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

Prop	Type	Default	Description
`error`	`boolean`	`false`	Shows error styles.
`hideLabel`	`boolean`	`false`	Visually hides the label.
`small`	`boolean`	`false`	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and the switch to opposite ends.
`stack`	`boolean`	`false`	Stacks the label under the switch.
`v-model`	`boolean`, `(string`, `number)[]`	-	The checked state, or the checked values of a group.

Slots

Slot	Description
`default`	The label.
`end-text`	Supporting text displayed below the label.
`icon-checked`	An optional icon in the thumb when checked.
`icon-unchecked`	An optional icon in the thumb when unchecked.

Attributes that aren't props, such as disabled or name, go to the <input>. Without a label, set aria-label or aria-labelledby.

Table

Prop	Type	Default	Description
`variant`	`"dense"`, `"spacious"`	-	The variant to use.

Slots

Slot	Description
`default`	The table sections.

Set column widths with TableColumnGroup and TableColumn, which takes a width.

Tabs

Prop	Type	Default	Description
`name`	`string`	-	The name shared by the tab inputs. Generated when omitted.

Slots

Slot	Description
`default`	The tab items.

Tabs Item

Prop	Type	Default	Description
`name`	`string`	-	Overrides the name shared by the tab inputs.
`open`	`boolean`	`false`	Selects the tab initially.
`panelId`	`string`	-	The id of the panel. Generated when omitted.
`tabId`	`string`	-	The id of the input. Generated when omitted.

Slots

Slot	Description
`default`	The tab and the panel.

Tabs Panel

Prop	Type	Default	Description
`panelId`	`string`	-	The id of the panel. Set by the item.
`tabId`	`string`	-	The id of the tab input that labels it. Set by the item.

Slots

Slot	Description
`default`	The panel content.

Tabs Tab

Prop	Type	Default	Description
`tabId`	`string`	-	The id of the input it labels. Set by the item.

Slots

Slot	Description
`default`	The tab label.

Text Field

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Changes size depending on its content.
`description`	`string`	-	Description text displayed above the field.
`endText`	`string`	-	Supporting text displayed below the field.
`error`	`boolean`	`false`	Shows error styles.
`filled`	`boolean`	`false`	The variant to use.
`id`	`string`	-	The id of the `<input>`.
`label`	`string`	-	The label for the field.
`small`	`boolean`	`false`	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and description to one side and the input to the other.
`startText`	`string`	-	Legacy alias of `description`.
`type`	`"numeric"`, `string`	`"text"`	The input type. `"numeric"` renders a text input with a numeric keyboard.
`v-model`	`string`, `number`	-	The input value.

Slots

Slot	Description
`default`	Extra content inside the root, such as a `<datalist>`.
`description`	Description text displayed above the field.
`end-text`	Supporting text displayed below the field.
`footer`	Content below the input, inside the border, with a divider.
`header`	Content above the input, inside the border, with a divider.
`label`	The label for the field.
`prefix`	Content at the inline-start of the field, inside the border.
`suffix`	Content at the inline-end of the field, inside the border.
`supporting-text`	Legacy alias of the `end-text` slot.

Attributes that aren't props, such as placeholder or disabled, go to the <input>.

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

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Changes height depending on its content.
`description`	`string`	-	Description text displayed above the field.
`endText`	`string`	-	Supporting text displayed below the field.
`error`	`boolean`	`false`	Shows error styles.
`filled`	`boolean`	`false`	The variant to use.
`id`	`string`	-	The id of the `<textarea>`.
`label`	`string`	-	The label for the field.
`small`	`boolean`	`false`	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and description to one side and the textarea to the other.
`v-model`	`string`	-	The textarea value.

Slots

Slot	Description
`default`	Extra content inside the root.
`description`	Description text displayed above the field.
`end-text`	Supporting text displayed below the field.
`footer`	Content below the textarea, inside the border, with a divider.
`header`	Content above the textarea, inside the border, with a divider.
`label`	The label for the field.
`prefix`	Content at the inline-start of the field, inside the border.
`suffix`	Content at the inline-end of the field, inside the border.
`supporting-text`	Legacy alias of the `end-text` slot.

Attributes that aren't props, such as placeholder or rows, go to the <textarea>.

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

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the button.
`id`	`string`	-	The id of the `<input>`. Generated when omitted.
`label`	`string`	-	The input value when `value` is omitted.
`name`	`string`	-	The name of the input. Set by the group.
`pressed`	`boolean`	`false`	Selects the button.
`size`	`"x-small"`, `"small"`	-	The size of the element.
`type`	`"checkbox"`, `"radio"`	`"checkbox"`	The input type. `"radio"` allows one selection in a group.
`value`	`string`	-	The value of the input.

Slots

Slot	Description
`default`	The label and an optional icon.

Toggle Group

Prop	Type	Default	Description
`name`	`string`	-	The name shared by the inputs. Generated when omitted.
`orientation`	`"vertical"`	-	The orientation of the element.
`selection`	`"multiple"`, `"single"`	`"multiple"`	Whether one or several buttons can be selected. `"single"` uses radio inputs.
`size`	`"default"`, `"x-small"`, `"small"`	`"default"`	The size of the buttons.

Slots

Slot	Description
`default`	The toggle buttons.

Prop	Type	Default	Description
`alignment`	`string`	`"block-start"`	Any valid `position-area` value. Controls where the tooltip is placed.
`arrow`	`boolean`	`false`	Adds an arrow that points to the trigger.
`id`	`string`	-	The id of the tooltip. Add `interestfor` with the same id to the trigger.
`label`	`string`	-	The tooltip, a `popover="hint"`.

Slots

Slot	Description
`content`	The tooltip, a `popover="hint"`.
`default`	The trigger that shows the tooltip on hover and focus.

Typography

Prop	Type	Default	Description
Classes	`.ui-h1`–`.ui-h6`, `.ui-p`, `.ui-overline`, `.ui-caption`, `.ui-hgroup`, `.ui-blockquote`, `pre.ui-code-block`, inline utilities, `.ui-rich-text`	-	CSS-only typography. Apply classes on elements in templates; no Astro component.
Sizes	`.ui-small`, `.ui-large`	-	Size modifiers on `.ui-p`.