Press and release (pointer or Space/Enter). Uses data-motion-phase="press" / data-motion-phase="release" via buttonMotionPress().

` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `AccordionValue \| undefined` | `—` | Controlled value. | | `defaultValue` | `AccordionValue` | `—` | Uncontrolled initial value. | | `onValueChange` | `((value: AccordionValue) => void) \| undefined` | `—` | Event handler called when the value changes. | | `multiple` | `boolean` | `false` | Whether multiple items can be open at the same time. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `orientation` | `AccordionOrientation` | `'horizontal'` | Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. | | `children` | `Snippet<[{ openValues: string[] }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the accordion is disabled. | | `data-orientation` | Indicates the orientation of the accordion. | ##### Accordion.Header A heading that labels the corresponding panel. Renders an `

` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `render` | `string` | `—` | HTML element tag to render instead of the default host element. | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Accordion.Item Groups an accordion header with the corresponding panel. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string` | `—` | Controlled value. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `onOpenChange` | `((open: boolean, eventDetails: { reason: 'trigger-press' \| 'imperative' }) => void) \| undefined` | `—` | Event handler called when the open state changes. | | `children` | `Snippet<[{ open: boolean; disabled: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-disabled` | Present when the accordion item is disabled. | | `data-open` | Present when the accordion item is open. | ##### Accordion.Panel A collapsible panel with the accordion item contents. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `keepMounted` | `boolean` | `false` | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. | | `hiddenUntilFound` | `boolean` | `false` | Use the `hidden="until-found"` attribute when collapsed. | | `role` | `string \| undefined` | `—` | — | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-ending-style` | Present when the panel is animating out. | | `data-open` | Present when the accordion panel is open. | | `data-starting-style` | Present when the panel begins animating in. | ##### Accordion.Trigger A button that opens and closes the corresponding panel. Renders a `

Sizes

States

``` #### API Reference ##### Button A button component that can be used to trigger actions. Renders a ` {#if submitted}
Submitted: {submitted}
{/if} ``` #### API Reference ##### Form A native form element with consolidated error handling. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `errors` | `FormErrors \| undefined` | `—` | Validation errors returned externally, typically after submission by a server or a form action. This should be an object where keys correspond to the `name` attribute on ``, and values correspond to error(s) related to that field. | | `onFormSubmit` | `((formData: FormData, event: SubmitEvent) => void) \| undefined` | `—` | Event handler called when the form is submitted. `preventDefault()` is called on the native submit event when used. | | `children` | `Snippet` | `—` | Content rendered inside the part. | ### Input A text input control. #### Demo ```svelte
Sizes

Interactive
Name
Value: {value}
``` #### API Reference ##### Input A native input element that automatically works with [Field](https://base-ui.com/react/components/field). Renders an `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `value` | `string \| undefined` | `—` | Controlled value. | | `defaultValue` | `string` | `—` | Uncontrolled initial value. | | `onValueChange` | `((value: string, event: Event) => void) \| undefined` | `—` | Event handler called when the value changes. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-dirty` | Present when the input's value has changed (when wrapped in Field.Root). | | `data-disabled` | Present when the input is disabled. | | `data-filled` | Present when the input is filled (when wrapped in Field.Root). | | `data-focused` | Present when the input is focused (when wrapped in Field.Root). | | `data-invalid` | Present when the input is in an invalid state (when wrapped in Field.Root). | | `data-touched` | Present when the input has been touched (when wrapped in Field.Root). | | `data-valid` | Present when the input is in a valid state (when wrapped in Field.Root). | ### Menu A menu of actions or links triggered by a button. #### Demo ```svelte Song Add to Library Add to Playlist Play Next Favorite ``` #### API Reference ##### Menu.Root Groups all parts of the menu. Doesn't render its own HTML element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `open` | `boolean \| undefined` | `—` | Whether the component is open (controlled). | | `defaultOpen` | `boolean` | `false` | Whether the component is initially open (uncontrolled). | | `onOpenChange` | `((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined` | `—` | Event handler called when the open state changes. | | `onOpenChangeComplete` | `((open: boolean) => void) \| undefined` | `—` | Called after open/close animations complete. | | `modal` | `boolean` | `true` | Whether the menu enters a modal state when open. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. | | `loopFocus` | `boolean` | `true` | Whether highlight wraps at list ends. | | `openOnHover` | `boolean` | `—` | Open the menu when the pointer enters the trigger. | | `delay` | `number` | `0` | Open delay when `openOnHover` is set (ms). | | `closeDelay` | `number` | `0` | Close delay when leaving trigger/popup under hover (ms). | | `handle` | `MenuHandle \| undefined` | `—` | Imperative handle from . | | `children` | `Snippet<[{ open: boolean; payload: unknown }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-disabled` | Present when the part is disabled. | | `data-open` | Present when the part is open. | | `data-orientation` | The orientation of the component. | ##### Menu.Arrow Displays an element positioned against the menu anchor. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the menu popup is closed. | | `data-open` | Present when the menu popup is open. | ##### Menu.Backdrop An overlay displayed beneath the menu popup. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `render` | `string` | `—` | HTML element tag to render instead of the default host element. | | `dismissible` | `boolean` | `—` | — | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the menu is closed. | | `data-open` | Present when the menu is open. | ##### Menu.CheckboxItem A menu item that toggles a setting on or off. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `checked` | `boolean \| undefined` | `—` | Controlled checked state. | | `defaultChecked` | `boolean` | `false` | Uncontrolled initial checked state. | | `onCheckedChange` | `((checked: boolean, event: Event) => void) \| undefined` | `—` | Event handler called when the checked state changes. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet<[{ checked: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the menu checkbox item is checked. | | `data-disabled` | Present when the menu checkbox item is disabled. | | `data-highlighted` | Present when the menu checkbox item is highlighted. | | `data-unchecked` | Present when the menu checkbox item is not checked. | ##### Menu.CheckboxItemIndicator Indicates whether the checkbox item is ticked. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the menu checkbox item is checked. | | `data-disabled` | Present when the menu checkbox item is disabled. | | `data-unchecked` | Present when the menu checkbox item is not checked. | ##### Menu.Group Groups related menu items with the corresponding label. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Menu.GroupLabel An accessible label that is automatically associated with its parent group. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Menu.Item An individual interactive item in the menu. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `onClick` | `((event: MouseEvent) => void) \| undefined` | `—` | The click handler for the menu item. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the menu item is disabled. | | `data-highlighted` | Present when the menu item is highlighted. | ##### Menu.LinkItem A link in the menu that can be used to navigate to a different page or section. Renders an `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the part is disabled. | | `data-highlighted` | Present when the link is highlighted. | ##### Menu.Popup A container for the menu items. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `render` | `string` | `—` | HTML element tag to render instead of the default host element. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the menu is closed. | | `data-ending-style` | Present when the menu is animating out. | | `data-open` | Present when the menu is open. | | `data-orientation` | The orientation of the component. | | `data-starting-style` | Present when the menu begins animating in. | ##### Menu.Portal A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to ``. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `container` | `HTMLElement \| string \| null` | `—` | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Menu.Positioner Positions the menu popup against the trigger. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `side` | `rId:` | `'bottom'` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. | | `align` | `etOpe` | `'center'` | How to align the popup relative to the specified side. | | `sideOffset` | `n, rea` | `0` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. | | `alignOffset` | `ason)` | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. | | `collisionPadding` | `=> boolean; }; export type MenuContex` | `5` | Additional space to maintain from the edge of the collision boundary. | | `collisionBoundary` | `oolean; setOpe` | `'clipping-ancestors'` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionAvoidance` | `OpenChangeReason)` | `—` | Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`). - `'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible. - `'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows. - `'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit. - `'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR). - `'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR). - `'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`. | | `arrowPadding` | `overDe` | `5` | Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `sticky` | `OpenCha` | `false` | Whether to maintain the popup in the viewport after the anchor element was scrolled out of view. | | `positionMethod` | `ver(): void; read` | `'absolute'` | Maps to Floating UI strategy (`absolute` \| `fixed`). | | `strategy` | `ed: boolean; read` | `—` | — | | `anchor` | `oopFocus: boolean; readonly me` | `—` | Override the positioning anchor (element or virtual element). | | `disableAnchorTracking` | `n \| nul` | `false` | When `true`, skip continuous layout tracking of the anchor (position once; no resize/scroll auto-updates beyond the initial compute). | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the menu popup is closed. | | `data-open` | Present when the menu popup is open. | ##### Menu.RadioGroup Groups related radio items. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string \| undefined` | `—` | Controlled value. | | `defaultValue` | `string` | `—` | Uncontrolled initial value. | | `onValueChange` | `((value: string, event: Event) => void) \| undefined` | `—` | Event handler called when the value changes. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet<[{ value: string }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the part is disabled. | ##### Menu.RadioItem A menu item that works like a radio button in a given group. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string` | `—` | Controlled value. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet<[{ checked: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the menu radio item is selected. | | `data-disabled` | Present when the menu radio item is disabled. | | `data-highlighted` | Present when the menu radio item is highlighted. | | `data-unchecked` | Present when the menu radio item is not selected. | ##### Menu.RadioItemIndicator Indicates whether the radio item is selected. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the menu radio item is selected. | | `data-disabled` | Present when the menu radio item is disabled. | | `data-unchecked` | Present when the menu radio item is not selected. | ##### Menu.Separator A separator element accessible to screen readers. Renders a `
` element. No component-specific props — HTML attributes and children only. ##### Menu.SubmenuRoot Groups all parts of a submenu. Doesn't render its own HTML element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `open` | `boolean \| undefined` | `—` | Whether the component is open (controlled). | | `defaultOpen` | `boolean` | `false` | Whether the component is initially open (uncontrolled). | | `onOpenChange` | `((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined` | `—` | Event handler called when the open state changes. | | `children` | `Snippet<[{ open: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-open` | Present when the part is open. | ##### Menu.SubmenuTrigger A menu item that opens a submenu. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-disabled` | Present when the submenu trigger is disabled. | | `data-highlighted` | Present when the submenu trigger is highlighted. | | `data-open` | Present when the part is open. | ##### Menu.Trigger A button that opens the menu. Renders a ` ``` #### API Reference ##### Progress.Root Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `number \| null` | `—` | Controlled value. | | `min` | `number` | `0` | The minimum value. | | `max` | `number` | `100` | The maximum value. | | `format` | `Intl.NumberFormatOptions \| undefined` | `—` | Options to format the value. | | `getAriaValueText` | `\| ((formattedValue: string \| null, value: number \| null) => string \| undefined) \| undefined` | `—` | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. | | `locale` | `Intl.LocalesArgument \| undefined` | `—` | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-complete` | Present when the progress has completed. | | `data-indeterminate` | Present when the progress is in indeterminate state. | | `data-progressing` | Present while the progress is progressing. | ##### Progress.Indicator Visualizes the completion status of the task. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-complete` | Present when the progress has completed. | | `data-indeterminate` | Present when the progress is in indeterminate state. | | `data-progressing` | Present while the progress is progressing. | ##### Progress.Label An accessible label for the progress bar. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-complete` | Present when the progress has completed. | | `data-indeterminate` | Present when the progress is in indeterminate state. | | `data-progressing` | Present while the progress is progressing. | ##### Progress.Track Contains the progress bar indicator. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-complete` | Present when the progress has completed. | | `data-indeterminate` | Present when the progress is in indeterminate state. | | `data-progressing` | Present while the progress is progressing. | ##### Progress.Value A text element displaying the current value. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet<[formattedValue: string \| null, value: number \| null]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-complete` | Present when the progress has completed. | | `data-indeterminate` | Present when the progress is in indeterminate state. | | `data-progressing` | Present while the progress is progressing. | ### Radio A set of checkable buttons where only one can be checked at a time. #### Demo ```svelte Best apple Fuji Gala Granny Smith Honeycrisp (disabled) ``` #### API Reference ##### Radio.Root Represents the radio button itself. Renders a `` element and a hidden `` beside. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string` | `—` | Controlled value. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet<[{ checked: boolean; disabled: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the radio is checked. | | `data-disabled` | Present when the radio is disabled. | | `data-unchecked` | Present when the radio is not checked. | ##### Radio.Indicator Indicates whether the radio button is selected. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-checked` | Present when the radio is checked. | | `data-disabled` | Present when the radio is disabled. | | `data-unchecked` | Present when the radio is not checked. | ##### RadioGroup Extends div HTML attributes. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string \| undefined` | `—` | Controlled value. | | `defaultValue` | `string` | `—` | Uncontrolled initial value. | | `onValueChange` | `((value: string, event: Event) => void) \| undefined` | `—` | Event handler called when the value changes. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `name` | `string \| undefined` | `—` | — | | `required` | `boolean` | `—` | — | | `children` | `Snippet<[{ value: string; disabled: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the part is disabled. | ### Scroll Area Augments native scroll functionality for custom styling. #### Demo ```svelte
{#each Array.from({ length: 24 }, (_, i) => i + 1) as n}
Line {n} — scrollable content for the custom scrollbar demo.
{/each}
``` #### API Reference ##### ScrollArea.Root Groups all parts of the scroll area. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `overflowEdgeThreshold` | `number \| { top?: number; right?: number; bottom?: number; left?: number }` | `0` | Distance from an edge (px) at which overflow data attributes become active. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-overflow-bottom` | Present on the element when applicable. | | `data-overflow-left` | Present on the element when applicable. | | `data-overflow-right` | Present on the element when applicable. | | `data-overflow-top` | Present on the element when applicable. | | `data-overflow-x` | Present on the element when applicable. | | `data-overflow-y` | Present on the element when applicable. | | `data-scrolling` | Present when the user scrolls inside the scroll area. | ##### ScrollArea.Content A container for the content of the scroll area. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-scrolling` | Present when the user scrolls inside the scroll area. | ##### ScrollArea.Corner A small rectangular area that appears at the intersection of horizontal and vertical scrollbars. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-scrolling` | Present on the element when applicable. | ##### ScrollArea.Scrollbar A vertical or horizontal scrollbar for the scroll area. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `orientation` | `ScrollAreaOrientation` | `'horizontal'` | Whether the scrollbar controls vertical or horizontal scroll. | | `keepMounted` | `boolean` | `false` | Whether to keep the HTML element in the DOM when the viewport isn't scrollable. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-orientation` | Indicates the orientation of the scrollbar. | | `data-scrolling` | Present when the user scrolls inside the scroll area. | ##### ScrollArea.Thumb The draggable part of the scrollbar that indicates the current scroll position. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-orientation` | Indicates the orientation of the scrollbar. | | `data-scrolling` | Present when the user scrolls inside the scroll area. | | `data-slot` | Present on the element when applicable. | ##### ScrollArea.Viewport The actual scrollable container of the scroll area. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-scrolling` | Present when the user scrolls inside the scroll area. | ### Select Displays a list of options for the user to pick from. #### Demo ```svelte Apple Banana Cherry ``` #### `readOnly` `readOnly` locks the value, not the interaction. The popup still opens for browsing; item presses, Enter-to-select, and closed-trigger typeahead commits stay blocked. #### API Reference ##### Select.Root Groups all parts of the select. Doesn't render its own HTML element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `SelectValue \| undefined` | `—` | Controlled value. | | `defaultValue` | `SelectValue` | `—` | Uncontrolled initial value. | | `onValueChange` | `((value: SelectValue, event: Event) => void) \| undefined` | `—` | Event handler called when the value changes. | | `open` | `boolean \| undefined` | `—` | Whether the component is open (controlled). | | `defaultOpen` | `boolean` | `false` | Whether the component is initially open (uncontrolled). | | `onOpenChange` | `((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined` | `—` | Event handler called when the open state changes. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `name` | `string \| undefined` | `—` | Identifies the field when a form is submitted. | | `multiple` | `boolean` | `false` | Whether multiple items can be selected. | | `modal` | `boolean` | `true` | Whether the select enters a modal state when open. When `true`, document scroll is locked while open. | | `onOpenChangeComplete` | `((open: boolean) => void) \| undefined` | `—` | Event handler called after any animations complete when the select popup is opened or closed. | | `form` | `string \| undefined` | `—` | Identifies the form that owns the hidden input. Useful when the select is rendered outside the form. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to choose a different option. The popup can still open and be browsed; selection and typeahead commits stay blocked. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | | `autoComplete` | `HTMLInputAttributes['autocomplete']` | `—` | Provides a hint to the browser for autofill. | | `highlightItemOnHover` | `boolean` | `true` | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. | | `itemToStringLabel` | `((itemValue: string) => string) \| undefined` | `—` | When the item values are objects (``), this function converts the object value to a string representation for display in the trigger. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. | | `itemToStringValue` | `((itemValue: string) => string) \| undefined` | `—` | When the item values are objects (``), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop. | | `isItemEqualToValue` | `((itemValue: string, value: string) => boolean) \| undefined` | `—` | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison. | | `items` | `SelectItemsProp \| undefined` | `—` | Data structure of the items rendered in the select popup. When specified, `` renders the label of the selected item instead of the raw value. | | `children` | `Snippet<[{ value: SelectValue; open: boolean; disabled: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-disabled` | Present when the part is disabled. | | `data-open` | Present when the part is open. | ##### Select.Arrow Displays an element positioned against the select popup anchor. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the select popup is closed. | | `data-open` | Present when the select popup is open. | ##### Select.Backdrop An overlay displayed beneath the select popup. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `render` | `string` | `—` | HTML element tag to render instead of the default host element. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the select is closed. | | `data-open` | Present when the select is open. | ##### Select.Group Groups related select items with the corresponding label. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Select.GroupLabel An accessible label that is automatically associated with its parent group. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Select.Icon An icon that indicates that the trigger button opens a select popup. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-open` | Present when the part is open. | ##### Select.Item An individual option in the select popup. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `value` | `string` | `null` | Controlled value. | | `disabled` | `boolean` | `false` | Whether the control ignores user interaction. | | `children` | `Snippet<[{ selected: boolean; highlighted: boolean; disabled: boolean }]>` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the select item is disabled. | | `data-highlighted` | Present when the select item is highlighted. | | `data-selected` | Present when the select item is selected. | ##### Select.ItemIndicator Indicates whether the select item is selected. Renders a `` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the part is disabled. | | `data-selected` | Present when the item is selected. | ##### Select.ItemText A text label of the select item. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-highlighted` | Present when the item is highlighted. | | `data-select-item-text` | Present on the element when applicable. | | `data-selected` | Present when the item is selected. | ##### Select.Label An accessible label that is automatically associated with the select trigger. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-disabled` | Present when the part is disabled. | ##### Select.List A container for the select items. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-open` | Present when the part is open. | ##### Select.Popup A container for the select list. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `render` | `string` | `—` | HTML element tag to render instead of the default host element. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the select is closed. | | `data-ending-style` | Present when the select is animating out. | | `data-open` | Present when the select is open. | | `data-starting-style` | Present when the select begins animating in. | ##### Select.Portal A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to ``. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `container` | `HTMLElement \| string \| null` | `—` | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `—` | — | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Select.Positioner Positions the select popup. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `side` | `{ t` | `'bottom'` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. | | `align` | `LElem` | `'center'` | How to align the popup relative to the specified side. | | `sideOffset` | `up: HT` | `0` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. | | `alignOffset` | `posi` | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side. | | `collisionPadding` | `null; list: HTMLElement \| null; arro` | `5` | Additional space to maintain from the edge of the collision boundary. | | `collisionBoundary` | `}; export type` | `'clipping-ancestors'` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionAvoidance` | `only value: Select` | `—` | Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`). - `'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible. - `'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows. - `'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit. - `'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR). - `'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR). - `'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`. | | `arrowPadding` | `alue:` | `5` | Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `sticky` | `event:` | `false` | Whether to maintain the popup in the viewport after the anchor element was scrolled out of view. | | `positionMethod` | `eReason): void; r` | `'absolute'` | Maps to Floating UI strategy (`absolute` \| `fixed`). | | `strategy` | `ing, label: string` | `—` | — | | `anchor` | `l): void; readonly items: Sele` | `—` | Override the positioning anchor (element or virtual element). | | `disableAnchorTracking` | `string` | `false` | When `true`, skip continuous layout tracking of the anchor (position once; no resize/scroll auto-updates beyond the initial compute). | | `alignItemWithTrigger` | `boolean` | `true` | Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the select popup is closed. | | `data-open` | Present when the select popup is open. | ##### Select.ScrollDownArrow An element that scrolls the select popup down when hovered. Does not render when using touch input. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-direction` | Indicates the direction of the scroll arrow. | | `data-hidden` | Present on the element when applicable. | ##### Select.ScrollUpArrow An element that scrolls the select popup up when hovered. Does not render when using touch input. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-direction` | Indicates the direction of the scroll arrow. | | `data-hidden` | Present on the element when applicable. | ##### Select.Separator A visual separator between items or groups. Renders a `
` element. No component-specific props — HTML attributes and children only. ##### Select.Trigger A button that opens the select popup. Renders a `
{#each toaster.toasts as toast (toast.id)}

Dismiss {/each} ``` #### Updating toasts `useToastManager().update` accepts a partial object or a function of the current toast. Omitted fields are preserved: ```ts const toastManager = Toast.useToastManager(); toastManager.update(id, (prev) => ({ title: 'Upload complete', description: prev.description })); ``` #### API Reference ##### Toast.Root Groups all parts of an individual toast. Renders a `
` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `toast` | `ToastData` | `—` | — | | `swipeDirection` | `ToastSwipeDirection \| ToastSwipeDirection[] \| undefined` | `['down', 'right']` | Direction(s) in which the toast can be swiped to dismiss. | | `children` | `Snippet` | `—` | Content rendered inside the part. | | Data attribute | Description | | --- | --- | | `data-closed` | Present when the part is closed. | | `data-ending-style` | Present when the toast is animating out. | | `data-expanded` | Present when the toast is expanded in the viewport. | | `data-limited` | Present when the toast was limited because the toast limit was exceeded. | | `data-open` | Present when the part is open. | | `data-starting-style` | Present when the toast begins animating in. | | `data-swipe-direction` | The direction the toast was swiped. | | `data-swiping` | Present when the toast is being swiped. | | `data-type` | The type of the toast. | ##### Toast.Provider Provides a context for creating and managing toasts. | Property | Type | Default | Description | | --- | --- | --- | --- | | `toaster` | `ToastManager \| undefined` | `—` | — | | `timeout` | `number \| undefined` | `5000` | The default amount of time (in ms) before a toast is auto dismissed. A value of `0` will prevent the toast from being dismissed automatically. | | `limit` | `number \| undefined` | `3` | The maximum number of toasts that can be displayed at once. When the limit is exceeded, the oldest toasts are marked as `limited` (via the `data-limited` attribute) rather than removed, so they can be hidden or animated out. | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Toast.Action Performs an action when clicked. Renders a `

Primary (animated pill)

Secondary (animated underline)

Sizes

Toggle group

Button press

` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### AlertDialog.Trigger A button that opens the alert dialog. Renders a `

Sizes

Variants (class names)

Sizes

States

Sizes

` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Dialog.Trigger A button that opens the dialog. Renders a `

Sides

` element. | Property | Type | Default | Description | | --- | --- | --- | --- | | `children` | `Snippet` | `—` | Content rendered inside the part. | ##### Drawer.Trigger A button that opens the drawer. Renders a `

Sizes

Interactive