` | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) | ## Using Body Scroll Prioritize the `` element as the scrollable page element over child elements. Otherwise you risk the following pitfalls: 1. Mobile browser's "pull to refresh" feature will not work as expected. 2. The Mobile Safari's browser interface will not auto-hide when scrolling vertically. 3. CSS print styles may not work as expected. 4. Accessibility may be adversely affected, especially on touch screen devices. 5. May introduce inconsistent behavior between your app framework's layout solution. ## Tailwind Utilities Tailwind provides several utility classes that may be helpful when generating custom layouts. ### Grid Learn more about [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/). \| Utility | Description | \| -------------------------------------------------------------- | -------------------------------------------------------------------------------- | \| [Columns](https://tailwindcss.com/docs/grid-template-columns) | Utilities for specifying the columns in a grid layout. | \| [Column Start/End](https://tailwindcss.com/docs/grid-column) | Utilities for controlling how elements are sized and placed across grid columns. | \| [Rows](https://tailwindcss.com/docs/grid-template-rows) | Utilities for specifying the rows in a grid layout. | \| [Row Start/End](https://tailwindcss.com/docs/grid-row) | Utilities for controlling how elements are sized and placed across grid rows. | \| [Auto Flow](https://tailwindcss.com/docs/grid-auto-flow) | Utilities for controlling how elements in a grid are auto-placed. | \| [Auto Columns](https://tailwindcss.com/docs/grid-auto-columns) | Utilities for controlling the size of implicitly-created grid columns. | \| [Auto Rows](https://tailwindcss.com/docs/grid-auto-rows) | Utilities for controlling the size of implicitly-created grid rows. | \| [Gap](https://tailwindcss.com/docs/gap) | Utilities for controlling gutters between grid and flexbox items. | ### Alignment The following options are available for both [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) styles. \| Utility | Description | \| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | \| [Justify Content](https://tailwindcss.com/docs/justify-content) | Utilities for controlling how flex and grid items are positioned along a container's main axis. | \| [Justify Items](https://tailwindcss.com/docs/justify-items) | Utilities for controlling how grid items are aligned along their inline axis. | \| [Justify Self](https://tailwindcss.com/docs/justify-self) | Utilities for controlling how an individual grid item is aligned along its inline axis. | \| [Align Content](https://tailwindcss.com/docs/align-content) | Utilities for controlling how rows are positioned in multi-row flex and grid containers. | \| [Align Items](https://tailwindcss.com/docs/align-items) | Utilities for controlling how flex and grid items are positioned along a container's cross axis. | \| [Align Self](https://tailwindcss.com/docs/align-self) | Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis. | \| [Place Content](https://tailwindcss.com/docs/place-content) | Utilities for controlling how content is justified and aligned at the same time. | \| [Place Items](https://tailwindcss.com/docs/place-items) | Utilities for controlling how items are justified and aligned at the same time. | \| [Place Self](https://tailwindcss.com/docs/place-self) | Utilities for controlling how an individual item is justified and aligned at the same time. | ### Responsive Design We recommend you utilize Tailwind's built-in [responsive breakpoints](https://tailwindcss.com/docs/responsive-design) for handling responsive design. ```html

(main)

``` By default, your `` and `` may collapse vertically and not extend to full height of the viewport. Consider a reset: ```css html, body { @apply h-full; } ``` ## The Basics Let's start by creating traditional layouts using a combination of semantic HTML and Tailwind utility classes. ### One Column ### Two Column ### Three Column ## Sticky Positioning If you wish for your header or sidebar to remain fixed while scrolling, try the following techniques. ### Sticky Header For `

`, we'll implement a few specific utility classes: * [sticky](https://tailwindcss.com/docs/position#sticky-positioning-elements) - Sets the CSS display to a value of sticky. * [top-0](https://tailwindcss.com/docs/top-right-bottom-left) - Sets the top offset to a value of 0px. * [z-10](https://tailwindcss.com/docs/z-index) - Sets the z-index stacking to a value of 10. > TIP: Use [backdrop-blur](https://tailwindcss.com/docs/backdrop-blur) to produce the hazy glass-like effect for overlapped semi-transparent elements. ### Sticky Sidebar For `

`, we introduce two addition utility classes: * [col-span-1](https://tailwindcss.com/docs/grid-column) - we must define our columns explicitly to ensure all styles are display as expected. * [h-screen](https://tailwindcss.com/docs/height#viewport-height) - ensures our sidebar matches the viewport height. See Calculate Offsets below for more complex layouts. ## Advanced Techniques ### Calculate Offsets You may use the [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) property to calculate numeric amounts, which can be handy when you have multiple sticky elements. ```html ``` 1. Sets the `height` value using an arbitrary syntax 2. The initial value is set to 100vh (100% of the viewport height) 3. Finally we subtract the offset for our header (ex: 100px) ### Smart Grid Rows Combine the grid arbitrary syntax with [minmax](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) to dynamically set a min and max range for your columns or rows. This is useful when creating a three column layout that need to adhere to a max container width. ```html

(main)

``` ### Grid Template If you wish to go beyond Tailwind, native CSS also offers [grid-template](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template). This provides a declarative shorthand for defining grid columns, rows, and areas. Take care to match your [media query breakpoints](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) configured by Tailwind by default, or extended within your application's [Tailwind configuration](https://tailwindcss.com/docs/responsive-design). # Figma UI kit Welcome to the Skeleton Figma Design System Tutorials! {

Explore step-by-step guides to unlock the full potential of Skeleton in your design workflow. Whether you're setting up for the first time or mastering advanced features, these tutorials will guide you every step of the way.

} ## Get Access Review the benefits of the Figma UI Kit for Skeleton. ## Guides Follow along with our step-by-step guides. # Cookbook A collection of recipes for crafting interface features that utilize Skeleton primitives. {/* --- */} ## What's This? Learn how [recipes](https://bigmedium.com/ideas/the-art-of-design-system-recipes.html) can help you augment and expand the Skeleton design system and component library. ## Browse # Themes The Skeleton theme system. {

Skeleton themes utilize{' '} CSS custom properties {' '} to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme generator to create your own. Enable one or more and quickly switch on-demand.

} *** ## Preset Themes Skeleton is provided with high quality set of hand curated themes, as shown below. Tap the theme preview above to copy the theme name to your clipboard. Then implement any desired theme in your app's global stylesheet. ```css title="app.css" {3} /* @import '@skeletonlabs/skeleton'; */ @import '@skeletonlabs/skeleton/themes/{theme-name}'; ``` > Make sure to replace `{theme-name}` with your desired theme names. ## Custom Themes Use our powerful Theme Generator app to create your own themes. 1. Open the Theme Generator and customize to your preference. 2. Make sure to set a unique name for your theme. 3. Tap the "code" view from the menu at top-right corner. 4. Tap the "copy" button at the top of copy the theme contents. 5. Paste the contents into a new file at your project root, such as `my-theme-name.css` (any name is fine). Follow the step below to register any number of custom themes. Take care to match each theme's file name. ## Register Themes You may register any number of themes by adding addition theme imports to your global stylesheet. Please note that each theme will slightly increase the final CSS bundle size. ```css /* @import '@skeletonlabs/skeleton'; */ /* Register Preset Themes */ @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/mona'; @import '@skeletonlabs/skeleton/themes/vox'; /* Register a Custom Themes */ /* Make sure to resolve the relative path. */ /* Note the .css extension is optional. */ @import '../{my-theme-name}'; ``` ## Activate a Theme You may define the active theme using the `data-theme` attribute on your `` element. ```html ... ``` > TIP: If you wish to create a theme switcher, this is the value you should aim to modify. *** ## Customize and Extend ### Modify Properties You can modify any [theme property](/docs/get-started/core-api) on demand using the following technique. Simply add this to your global stylesheet, following all Tailwind and Skeleton configuration. Use this to override preset theme properties. ```css title="app.css" [data-theme='cerberus'] { --spacing: 0.22rem; --radius-container: 0.375rem; --heading-font-weight: bolder; } ``` ### Target Themes If your application supports multiple themes, you may isolate selection using the `data-theme` attribute. Just make sure to account for light and dark mode color values. ```css title="app.css" /** Target only Cerberus .h1 elements. */ [data-theme='cerberus'] .h1 { color: red; @variant dark { color: green; } } /** Target only Mona .h1 elements. */ [data-theme='mona'] .h1 { color: blue; @variant dark { color: yellow; } } ``` ### Backgrounds Your app's light and dark mode background color values can be adjusted using the following [theme properties](/docs/get-started/core-api#colors). ```css title="app.css" [data-theme='cerberus'] body { --body-background-color: pink; --body-background-color-dark: green; } ``` Background images are supported, including CSS mesh gradients. The following example adheres to theme colors. ```css title="app.css" [data-theme='cerberus'] body { background-image: radial-gradient(at 24% 25%, color-mix(in oklab, var(--color-primary-500) 30%, transparent) 0px, transparent 30%), radial-gradient(at 35% 13%, color-mix(in oklab, var(--color-success-500) 18%, transparent) 0px, transparent 30%), radial-gradient(at 100% 64%, color-mix(in oklab, var(--color-error-500) 3%, transparent) 0px, transparent 40%); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } ``` We recommend Mesher for generating custom mesh gradients. This will generate colors using RGB, but can be migrated to utilize `var()` for colors and `color-mix()` for transparency, per the example above. ### Custom Fonts Skeleton recommends the use of [Fontsource](https://fontsource.org/) for installing and managing custom fonts. Install your font of choice. ```console npm install @fontsource/open-sans ``` Then import each font at the top of your global stylesheet, but below your Tailwind configuration. ```css title="app.css" @import '@fontsource/open-sans'; ``` Finally, use the following [theme properties](/docs/get-started/core-api#base-1) to set each respective font-family property. Note that for custom themes, these settings are can be defined directly within each respective theme file. ```css title="app.css" [data-theme='cerberus'] { --heading-font-family: 'Open Sans', sans-serif; --base-font-family: 'Open Sans', sans-serif; --anchor-font-family: 'inherit'; } ``` ## Core API For more information, please refer to the full [Core API](/docs/get-started/core-api) documentation. # Colors The Skeleton color system. ## Color Palette Supports all standard Tailwind color utility classes using the following pattern. ``` {property}-{color}-{shade} ``` \| Key | Accepted Values | \| -------- | ---------------------------------------------------------------------------------------------------------------- | \| Property | `accent`, `bg`, `border`, `caret`, `decoration`, `divide`, `fill`, `outline`, `ring`, `shadow`, `stroke`, `text` | \| Color | `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface` | \| Shade | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950` | ```html

...

``` *** ## Contrast Colors Contrast color values are available for every shade. Use these to set accessible text color and icon fill values. ``` {property}-{color}-contrast-{shade} ``` ```astro

Standard Colors

Color Pairings

``` See the [Preset system](/docs/design/presets) for additional utility classes that automatically mix each color and contrast tone. *** ## Color Pairings Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc). ``` {property}-{color}-{lightModeShade}-{darkModeShade} ``` For example: * `bg-surface-200-800` * `text-primary-400-600` * `border-secondary-50-950` ### How Pairings Work Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemented in your CSS bundle as follows: ```css .text-primary-300-700 { color: light-dark(var(--color-primary-300), var(--color-primary-700)); } ``` This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities. ```html

...

``` By default, Skeleton sets the overall app's color scheme to match light or dark mode. ### Pairing Previews The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported. The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react. ### When to use Pairings Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp but, but inverts the order when toggling from light to dark mode. * We can use shade `950` for light mode and `50` from dark mode to represent our body text color. * Then use shade `50` from light mode and `950` from dark mode to represent our app background. * Use the static `500` shade for key branding elements, such as buttons or banners. * Then reserve multiple layers between for elements such as cards, inputs, and more. *** ## Transparency Both Skeleton Colors and Color Pairings support Tailwind's color transparency syntax. ```html

Primary Color @ 25% transparency

Surface Pairing 50/950 @ 60% transparency

``` # Presets Canned styles for your interface elements. {

Presets are pre-defined styles that allow you to quickly and easily style buttons, badges, cards, and more. These are created by mixing Skeleton and Tailwind primitives.

} ```astro --- import { BookmarkIcon } from 'lucide-react'; const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full'; const presets = [ { label: 'Filled', class: 'preset-filled-primary-500', }, { label: 'Tonal', class: 'preset-tonal-primary', }, { label: 'Outlined', class: 'preset-outlined-primary-500', }, { label: 'Glass', class: 'preset-glass-primary', }, { label: 'Elevated', class: 'preset-filled-surface-100-900 shadow-xl', }, { label: 'Ghost', class: 'hover:preset-tonal', }, { label: 'Ghost (Icon)', class: 'hover:preset-tonal-primary', icon: BookmarkIcon, }, { label: 'Gradient', class: 'preset-gradient', }, ]; ---

{ presets.map((preset, index) => (

{index + 1}

)) }

``` 1. **Filled** - a filled preset of the primary brand color. 2. **Tonal** - a tonal preset of the primary brand color. 3. **Outlined** - an outlined preset of the primary brand color. 4. **Glass** - a custom preset using background transparency and backdrop blur. 5. **Elevated** - mixes a filled preset with a shadow. 6. **Ghost** - has no style by default, but shows a tonal preset on hover. 7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover. 8. **Gradient** - a custom preset generated using Tailwind gradient primitives. ## Skeleton Presets Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors. ### Filled ``` preset-filled-{color}-{lightModeShade}-{darkModeShade} ``` ```astro

{/* Neutral */}

(neutral)

{/* Colors */}

950-50

900-100

800-200

700-300

600-400

500

400-600

300-700

200-800

100-900

50-950

``` ### Tonal ``` preset-tonal-{color} ``` ```astro

{/* Neutral */}

(neutral)

{/* Colors */}

primary

secondary

tertiary

success

warning

error

surface

``` ### Outlined ``` preset-outlined-{color}-{shade}-{shade} ``` ```astro

{/* Neutral */}

(neutral)

{/* Colors */}

950-50

900-100

800-200

700-300

600-400

500

400-600

300-700

200-800

100-900

50-950

``` ## Custom Presets Consider these best practices when creating presets: * Custom presets are only limited by your imagination. * Use any combination of Skeleton or Tailwind-provided primitive to generate a preset. * Apply presets to any relevant element, including: buttons, cards, inputs, and more. * Use a set naming convention, such as `preset-{foo}` to keep things standardized. * Implement all presets in using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your global stylesheet. * Abstrast presets to a stylesheet or NPM package for shared used between projects. Please be aware the following presets are not included by Skeleton. Rather, these are examples of how you might utilize the Preset pattern. ### Input Presets ```astro

``` ### Gradient Presets Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes that can be used to generate presets. ```astro

Card

``` ### Glass Presets ```astro --- const baseClasses = 'card p-4 text-white text-center flex justify-start items-center'; ---

Neutral

Primary

Secondary

Tertiary

Success

Warning

Error

Surface

``` # Typography The Skeleton typography system. {

Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.

} ## Typographic Scale Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties. ## Utility Classes Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention. ### Headings ```astro

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

``` ### Paragraphs ```astro

The quick brown fox jumps over the lazy dog

``` ### Blockquotes ```astro

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"

``` ### Anchor ```astro Anchor ``` ### Pre-Formatted ```astro

The quick brown fox jumps over the lazy dog.

``` ### Code ```astro

Insert the .example class here.

``` ### Keyboard ```astro

Press ⌘ + C to copy.

``` ### Insert & Delete ```astro

~~~~Always~~ Gonna Give You Up~~ Never Gonna Give You Up

``` ### Mark ```astro

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga.

``` ## Lists Skeleton defers to Tailwind's built-in utility classes for common list styles. ### Unordered ```astro

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

``` ### Ordered ```astro

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

``` ### Basic ```astro

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

``` ### Description ```astro

Item A: Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Item B: Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Item C: Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

``` ### Navigation ```astro ``` ## Semantic Typography When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing [custom presets](/docs/design/presets#custom-presets) that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet. ```svelte

Class	Preview
`preset-typo-display-4`	Aa
`preset-typo-display-3`	Aa
`preset-typo-display-2`	Aa
`preset-typo-display-1`	Aa
`preset-typo-headline`	Headline
`preset-typo-title`	Title
`preset-typo-subtitle`	Subtitle
`preset-typo-body-1`	Body 1
`preset-typo-body-2`	Body 2
`preset-typo-caption`	Caption
`preset-typo-menu`	Menu
`preset-typo-button`	Button

``` # Spacing Set a dynamic scale for application whitespace. This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants). This affects the following utilities. * `padding` * `margin` * `width` * `minWidth` * `maxWidth` * `height` * `minHeight` * `maxHeight` * `gap` * `inset` * `space` * `translate` # Badges Provides a robust set of non-interactive badge styles. ```astro --- import { HeartIcon } from 'lucide-react'; ---

Badge Badge

``` ## Presets Provides full support of [Presets](/docs/design/presets). ```html

Badge Badge Badge

``` ## Overlap Use `badge-icon` to create overlapping numeric or icon badges. ```astro --- const imgSrc = 'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; ---

``` # Buttons Provide a variety of button, including customizable sizes and types. ```astro --- import { ArrowRightIcon } from 'lucide-react'; ---

``` ## Presets Provides full support of [Presets](/docs/design/presets). ```astro

``` ## Sizes ```astro

``` ## Disabled When applied to a ` ``` ## Group ```astro ``` # Chips Provides a robust set of interactive chip styles. ```astro --- import { CheckIcon } from 'lucide-react'; ---

``` ## Presets Provides full support of [Presets](/docs/design/presets). ```astro

``` ## Disabled When applied to a ` ``` ## Selection # Dividers Horizontal and vertical rule styling. ```astro

Above the divider.

Below the divider.

``` ## Size Use Tailwind's [border width](https://tailwindcss.com/docs/border-width) utilities to adjust thickness. ```astro

Default

border-t-2

border-t-4

border-t-8

``` ## Style Use Tailwind's [border style](https://tailwindcss.com/docs/border-style) utilities to adjust visual style. ```astro

border-solid

border-dashed

border-dotted

border-double

``` ## Colors Use any Tailwind or Skeleton [colors or pairing](/docs/design/colors). ```astro

border-primary-500

border-secondary-500

border-tertiary-500

border-success-500

border-warning-500

border-error-500

border-surface-950-50

``` ## Vertical Use `vr` for a vertical rule, which supports all above styles. Make sure to set the height. ```astro

Default → ← border-l-8

``` # Cards Provides container elements that wrap and separate content. ```astro

Card

``` ```astro --- const imgSrc = 'https://images.unsplash.com/photo-1463171515643-952cee54d42a?q=80&w=450&h=190&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; --- {/* Header */}

{/* Article */}

Announcements

Skeleton is Awesome

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.

{/* Footer */} ``` ## Presets Provides full support of [Presets](/docs/design/presets). ```astro

Card

``` # Forms and Inputs Various form and input styles. ## Prerequisites ### Tailwind Forms Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling. This plugin is required if you wish to make use of any utility classes provided on this page. Install the `@tailwindcss/forms` package. ```sh npm install -D @tailwindcss/forms ``` Implement the plugin using the `@plugin` directive immediately following the `tailwindcss` import. ```css {2} @import 'tailwindcss'; @plugin '@tailwindcss/forms'; /* ...Skeleton config here... */ ``` ### Browser Support The display of native and semantic HTML form elements can vary between both operating systems and browsers. Skeleton does its best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience. ## Inputs ```astro Input ``` ## Select ```astro ``` ## Checkboxes ```astro ``` ## Radio Groups ```astro ``` ## Kitchen Sink Display and functionality of these elements may vary greatly between devices and browsers. ```astro ``` ## Groups Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/design/presets). ```astro --- import { CheckIcon, CircleDollarSignIcon, SearchIcon } from 'lucide-react'; --- ``` \| Class | Usage | \| ------------- | --------------------------------------- | \| `input-group` | Defines the parent input group set. | \| `ig-cell` | Defines a child cell for text or icons. | \| `ig-input` | Defines a child input of `type="text"`. | \| `ig-select` | Defines a child select element. | \| `ig-btn` | Defines a child button. | # Placeholders Provides "skeleton" placeholders that can display while content loads. ```html

``` ## Animated ```html

...

``` # Tables Provides a set of styles for native HTML table elements. ```astro --- const tableData = [ { position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' }, { position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' }, { position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' }, { position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' }, { position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' }, ]; ---

{ tableData.map((row) => ( )) }

{row.position}

{row.symbol}

{row.name}

{row.atomic_no}

``` ## Extras Optionally add a header, footer, and caption. ```astro --- const tableData = [ { position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' }, { position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' }, { position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' }, { position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' }, { position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' }, ]; ---

{ tableData.map((row) => ( )) }

A list of elements from the periodic table.
Position	Symbol	Name	Weight
{row.position}	{row.symbol}	{row.name}	{row.atomic_no}
Total			{tableData.length} Elements

``` ## Navigation Native HTML tables do not support interaction. For accessibility, use anchors or buttons within the last cell. ```astro --- const tableData = [ { first: 'Liam', last: 'Steele', email: 'liam@email.com' }, { first: 'Athena', last: 'Marks', email: 'athena@email.com' }, { first: 'Angela', last: 'Rivers', email: 'angela@email.com' }, ]; ---

{ tableData.map((row) => ( )) }

First Name	Last Name	Email
{row.first}	{row.last}	{row.email}	View →

``` ## Layout See [Tailwind's utility classes](https://tailwindcss.com/docs/table-layout) for adjusting the table layout algorithm. Apply this to the Table element. ## Hover Rows Add a visual hover effect using the following Tailwind syntax. ```html ... ``` ## Pagination Pair with the Skeleton [Pagination](/docs/components/pagination/react) component for large data sets. # Accordion Divide content into collapsible sections. ```svelte {#each content as item (item)}

{item.title}

{item.description} {/each} ``` ## Controlled Use `value` and `onValueChange` to control the value of the Accordion. ```svelte (value = details.value)}> {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## Indicator Add an indicator to the trigger with `Accordion.ItemIndicator`. ```svelte {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## Collapsible By default you can't close open items. Adding `collapsible` changes this behavior. ```svelte {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## Multiple Adding `multiple` allows items to open independently. ```svelte {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## Orientation Use the `orientation` prop to change the layout direction of the Accordion. ```svelte {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## Direction ```svelte {#each ['1', '2', '3'] as item (item)}

Item {item}

Content for item {item} {/each} ``` ## API Reference ### AccordionRootProps | Property | Default | Type | Description | | -------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | ids? | - | Partial\<\{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined | The ids of the elements in the accordion. Useful for composition. | | multiple? | false | boolean \| undefined | Whether multiple accordion items can be expanded at the same time. | | collapsible? | false | boolean \| undefined | Whether an accordion item can be closed after it has been expanded. | | value? | - | string\[] \| undefined | The controlled value of the expanded accordion items. | | defaultValue? | - | string\[] \| undefined | The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion. | | disabled? | - | boolean \| undefined | Whether the accordion items are disabled | | onValueChange? | - | ((details: ValueChangeDetails) => void) \| undefined | The callback fired when the state of expanded/collapsed accordion items changes. | | onFocusChange? | - | ((details: FocusChangeDetails) => void) \| undefined | The callback fired when the focused accordion item changes. | | orientation? | "vertical" | "horizontal" \| "vertical" \| undefined | The orientation of the accordion items. | | dir? | "ltr" | "ltr" \| "rtl" \| undefined | The document's text/writing direction. | | getRootNode? | - | (() => ShadowRoot \| Node \| Document) \| undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AccordionRootProviderProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | value | - | () => AccordionApi\ | - | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AccordionRootContextProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------- | ----------- | | children | - | Snippet\<\[() => AccordionApi\]> | - | ### AccordionItemProps | Property | Default | Type | Description | | --------- | ------- | ------------------------------------------------ | --------------------------------------- | | value | - | string | The value of the accordion item. | | disabled? | - | boolean \| undefined | Whether the accordion item is disabled. | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AccordionItemTriggerProps | Property | Default | Type | Description | | -------- | ------- | --------------------------------------------------- | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself | ### AccordionItemIndicatorProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AccordionItemContentProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | # App Bar A header element for the top of your page layout. ```svelte

Skeleton

``` ## Centered Control the layout using a [grid-cols-\*](https://tailwindcss.com/docs/grid-column) utility class. ```svelte

Headline

``` ## Extended Move the `` to a new row within the root. ```svelte

Headline

``` ## Responsive ```svelte

Headline

``` ## API Reference ### AppBarRootProps | Property | Default | Type | Description | | -------- | ------- | --------------------------------------------------- | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"header">]> \| undefined | Render the element yourself | ### AppBarToolbarProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AppBarLeadProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"nav">]> \| undefined | Render the element yourself | ### AppBarHeadlineProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AppBarTrailProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"nav">]> \| undefined | Render the element yourself | # Avatar An image with a fallback for representing the user. ```svelte SK ``` ## Fallback Use `` to provide initials, icons, or a framework-specific image component. ```svelte SK ``` ## Filter Avatars can implement [SVG Filters](/docs/guides/cookbook/svg-filters) using the image `class` attribute. ```svelte SK ``` ## API Reference ### AvatarRootProps | Property | Default | Type | Description | | --------------- | ------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | onStatusChange? | - | ((details: StatusChangeDetails) => void) \| undefined | Functional called when the image loading status changes. | | ids? | - | Partial\<\{ root: string; image: string; fallback: string; }> \| undefined | The ids of the elements in the avatar. Useful for composition. | | getRootNode? | - | (() => ShadowRoot \| Node \| Document) \| undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | | dir? | "ltr" | "ltr" \| "rtl" \| undefined | The document's text/writing direction. | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AvatarRootProviderProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | value | - | () => AvatarApi\ | - | | element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself | ### AvatarRootContextProps | Property | Default | Type | Description | | -------- | ------- | ---------------------------------------- | ----------- | | children | - | Snippet\<\[() => AvatarApi\]> | - | ### AvatarImageProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------ | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"img">]> \| undefined | Render the element yourself | ### AvatarFallbackProps | Property | Default | Type | Description | | -------- | ------- | ------------------------------------------------- | --------------------------- | | element? | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself | # Collapsible A container that can be expanded or collapsed to show or hide content. ```svelte Toggle Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae? ``` ## Controlled ```svelte (open = details.open)}> {open ? 'Close' : 'Open'} Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae? ``` ## Indicator ```svelte Toggle Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae? ``` ## Disabled ```svelte Toggle Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus ea reiciendis veritatis quae mollitia, nulla minima cupiditate quisquam soluta sunt? Necessitatibus non dolorum voluptas ea maiores itaque laborum officiis quia. ``` ## Alignment ```svelte Toggle Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae? ``` {/* TODO: Uncomment once Zag >=1.26.2 is released and used by Skeleton */} {/* ## Direction */} {/* */} {/* */} {/* */} {/* */} {/* */} {/*

 */}

{/*

 */}

{/*  */}

## API Reference

### CollapsibleRootProps

| Property         | Default | Type                                                                        | Description                                                                                                                        |
| ---------------- | ------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ids?             | -       | Partial\<\{ root: string; content: string; trigger: string; }> \| undefined | The ids of the elements in the collapsible. Useful for composition.                                                                |
| open?            | -       | boolean \| undefined                                                        | The controlled open state of the collapsible.                                                                                      |
| defaultOpen?     | -       | boolean \| undefined                                                        | The initial open state of the collapsible when rendered.
Use when you don't need to control the open state of the collapsible. |
| onOpenChange?    | -       | ((details: OpenChangeDetails) => void) \| undefined                         | The callback invoked when the open state changes.                                                                                  |
| onExitComplete?  | -       | VoidFunction \| undefined                                                   | The callback invoked when the exit animation completes.                                                                            |
| disabled?        | -       | boolean \| undefined                                                        | Whether the collapsible is disabled.                                                                                               |
| collapsedHeight? | -       | string \| number \| undefined                                               | The height of the content when collapsed.                                                                                          |
| collapsedWidth?  | -       | string \| number \| undefined                                               | The width of the content when collapsed.                                                                                           |
| getRootNode?     | -       | (() => ShadowRoot \| Node \| Document) \| undefined                         | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                         |
| dir?             | "ltr"   | "ltr" \| "rtl" \| undefined                                                 | The document's text/writing direction.                                                                                             |
| element?         | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                            | Render the element yourself                                                                                                        |

### CollapsibleRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => CollapsibleApi\                 | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### CollapsibleRootContextProps

| Property | Default | Type                                          | Description |
| -------- | ------- | --------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => CollapsibleApi\]> | -           |

### CollapsibleTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### CollapsibleIndicatorProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### CollapsibleContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Combobox

A combobox is an input widget with an associated popup that enables users to select a value from a collection of possible values.

```svelte



	Label
	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

## Groups

Create labelled groups for your items.

```svelte



	
		
		
	
	
		
			
				{#each collection.group() as [type, items] (type)}
					
						{type}
						{#each items as item (item.value)}
							
								{item.label}
								
							
						{/each}
					
				{/each}
			
		
	


```

## Auto Highlight

Search for any option, then tap Enter on your keyboard to automatically select it.

```svelte



	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

## Multiple

To maintain filtering functionality and improve clarity for users, we recommend displaying each selected value outside the perimeter of the Combobox component.

```svelte



	
		
			
			
		
		
			
				
					{#each items as item (item.value)}
						
							{item.label}
							
						
					{/each}
				
			
		
	
	
		{#each value as item (item)}
			
				{item}
			
		{/each}
	


```

## Disabled Item

```svelte



	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

## Custom Filter

Try mistyping `apple` or `banana` to see the custom filter using the fuzzy search from [Fuse.js](https://fusejs.io/) in action.

```svelte



	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

## Direction

```svelte



	Label
	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

## Guidelines

### Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the Positioner component part.

```svelte



	
		
		
	
	
		
			
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		
	


```

### Max Items

We recommend no more than 500 items max. For normal usage, a few dozen will provide the best performance.

## API Reference

### ComboboxRootProps

| Property                 | Default                        | Type                                                                                                                                                                                                                                                                                                                           | Description                                                                                                                                                                                                                                              |
| ------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open?                    | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | The controlled open state of the combobox                                                                                                                                                                                                                |
| defaultOpen?             | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | The initial open state of the combobox when rendered.
Use when you don't need to control the open state of the combobox.                                                                                                                             |
| ids?                     | -                              | Partial\<\{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number \| undefined) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }> \| undefined | The ids of the elements in the combobox. Useful for composition.                                                                                                                                                                                         |
| inputValue?              | -                              | string \| undefined                                                                                                                                                                                                                                                                                                            | The controlled value of the combobox's input                                                                                                                                                                                                             |
| defaultInputValue?       | ""                             | string \| undefined                                                                                                                                                                                                                                                                                                            | The initial value of the combobox's input when rendered.
Use when you don't need to control the value of the combobox's input.                                                                                                                       |
| name?                    | -                              | string \| undefined                                                                                                                                                                                                                                                                                                            | The \`name\` attribute of the combobox's input. Useful for form submission                                                                                                                                                                               |
| form?                    | -                              | string \| undefined                                                                                                                                                                                                                                                                                                            | The associate form of the combobox.                                                                                                                                                                                                                      |
| disabled?                | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether the combobox is disabled                                                                                                                                                                                                                         |
| readOnly?                | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether the combobox is readonly. This puts the combobox in a "non-editable" mode
but the user can still interact with it                                                                                                                            |
| invalid?                 | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether the combobox is invalid                                                                                                                                                                                                                          |
| required?                | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether the combobox is required                                                                                                                                                                                                                         |
| placeholder?             | -                              | string \| undefined                                                                                                                                                                                                                                                                                                            | The placeholder text of the combobox's input                                                                                                                                                                                                             |
| defaultHighlightedValue? | -                              | string \| null \| undefined                                                                                                                                                                                                                                                                                                    | The initial highlighted value of the combobox when rendered.
Use when you don't need to control the highlighted value of the combobox.                                                                                                               |
| highlightedValue?        | -                              | string \| null \| undefined                                                                                                                                                                                                                                                                                                    | The controlled highlighted value of the combobox                                                                                                                                                                                                         |
| value?                   | -                              | string\[] \| undefined                                                                                                                                                                                                                                                                                                         | The controlled value of the combobox's selected items                                                                                                                                                                                                    |
| defaultValue?            | \[]                            | string\[] \| undefined                                                                                                                                                                                                                                                                                                         | The initial value of the combobox's selected items when rendered.
Use when you don't need to control the value of the combobox's selected items.                                                                                                     |
| inputBehavior?           | "none"                         | "autohighlight" \| "autocomplete" \| "none" \| undefined                                                                                                                                                                                                                                                                       | Defines the auto-completion behavior of the combobox.

- \`autohighlight\`: The first focused item is highlighted as the user types
- \`autocomplete\`: Navigating the listbox with the arrow keys selects the item and the input is updated |
| selectionBehavior?       | "replace"                      | "clear" \| "replace" \| "preserve" \| undefined                                                                                                                                                                                                                                                                                | The behavior of the combobox input when an item is selected

- \`replace\`: The selected item string is set as the input value
- \`clear\`: The input value is cleared
- \`preserve\`: The input value is preserved                      |
| autoFocus?               | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to autofocus the input on mount                                                                                                                                                                                                                  |
| openOnClick?             | false                          | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to open the combobox popup on initial click on the input                                                                                                                                                                                         |
| openOnChange?            | true                           | boolean \| ((details: InputValueChangeDetails) => boolean) \| undefined                                                                                                                                                                                                                                                        | Whether to show the combobox when the input value changes                                                                                                                                                                                                |
| allowCustomValue?        | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to allow typing custom values in the input                                                                                                                                                                                                       |
| alwaysSubmitOnEnter?     | false                          | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to always submit on Enter key press, even if popup is open.
Useful for single-field autocomplete forms where Enter should submit the form.                                                                                                   |
| loopFocus?               | true                           | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to loop the keyboard navigation through the items                                                                                                                                                                                                |
| positioning?             | \{ placement: "bottom-start" } | PositioningOptions \| undefined                                                                                                                                                                                                                                                                                                | The positioning options to dynamically position the menu                                                                                                                                                                                                 |
| onInputValueChange?      | -                              | ((details: InputValueChangeDetails) => void) \| undefined                                                                                                                                                                                                                                                                      | Function called when the input's value changes                                                                                                                                                                                                           |
| onValueChange?           | -                              | ((details: ValueChangeDetails\) => void) \| undefined                                                                                                                                                                                                                                                                     | Function called when a new item is selected                                                                                                                                                                                                              |
| onHighlightChange?       | -                              | ((details: HighlightChangeDetails\) => void) \| undefined                                                                                                                                                                                                                                                                 | Function called when an item is highlighted using the pointer
or keyboard navigation.                                                                                                                                                                |
| onSelect?                | -                              | ((details: SelectionDetails) => void) \| undefined                                                                                                                                                                                                                                                                             | Function called when an item is selected                                                                                                                                                                                                                 |
| onOpenChange?            | -                              | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                                                                                                                                                                            | Function called when the popup is opened                                                                                                                                                                                                                 |
| translations?            | -                              | IntlTranslations \| undefined                                                                                                                                                                                                                                                                                                  | Specifies the localized strings that identifies the accessibility elements and their states                                                                                                                                                              |
| collection?              | -                              | ListCollection\ \| undefined                                                                                                                                                                                                                                                                                              | The collection of items                                                                                                                                                                                                                                  |
| multiple?                | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to allow multiple selection.

\*\*Good to know:\*\* When \`multiple\` is \`true\`, the \`selectionBehavior\` is automatically set to \`clear\`.
It is recommended to render the selected items in a separate container.              |
| closeOnSelect?           | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to close the combobox when an item is selected.                                                                                                                                                                                                  |
| openOnKeyPress?          | true                           | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to open the combobox on arrow key press                                                                                                                                                                                                          |
| scrollToIndexFn?         | -                              | ((details: ScrollToIndexDetails) => void) \| undefined                                                                                                                                                                                                                                                                         | Function to scroll to a specific index                                                                                                                                                                                                                   |
| composite?               | true                           | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether the combobox is a composed with other composite widgets like tabs                                                                                                                                                                                |
| disableLayer?            | -                              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | Whether to disable registering this a dismissable layer                                                                                                                                                                                                  |
| navigate?                | -                              | ((details: NavigateDetails) => void) \| null \| undefined                                                                                                                                                                                                                                                                      | Function to navigate to the selected item                                                                                                                                                                                                                |
| dir?                     | "ltr"                          | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                                                                                    | The document's text/writing direction.                                                                                                                                                                                                                   |
| getRootNode?             | -                              | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                                                                                            | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                               |
| onPointerDownOutside?    | -                              | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                        | Function called when the pointer is pressed down outside the component                                                                                                                                                                                   |
| onFocusOutside?          | -                              | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                              | Function called when the focus is moved outside the component                                                                                                                                                                                            |
| onInteractOutside?       | -                              | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                           | Function called when an interaction happens outside the component                                                                                                                                                                                        |
| element?                 | -                              | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                                                                                                               | Render the element yourself                                                                                                                                                                                                                              |

### ComboboxRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => ComboboxApi\               | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ComboboxRootContextProps

| Property | Default | Type                                            | Description |
| -------- | ------- | ----------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => ComboboxApi\]> | -           |

### ComboboxLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### ComboboxControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ComboboxInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### ComboboxTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### ComboboxPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ComboboxContentProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"ul">]> \| undefined | Render the element yourself |

### ComboboxItemGroupProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ComboboxItemGroupLabelProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ComboboxItemProps

| Property      | Default | Type                                            | Description                                                 |
| ------------- | ------- | ----------------------------------------------- | ----------------------------------------------------------- |
| persistFocus? | -       | boolean \| undefined                            | Whether hovering outside should clear the highlighted state |
| item          | -       | any                                             | The item to render                                          |
| element?      | -       | Snippet\<\[HTMLAttributes\<"li">]> \| undefined | Render the element yourself                                 |

### ComboboxItemTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### ComboboxItemIndicatorProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Date Picker

Select dates from a calendar interface.

```svelte



	Label
	
		
		
	
	
		
			
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Controlled

Manage the selected date value with Svelte state.

```svelte


 (value = e.value)}>
	Picked date: {value.at(0)?.toString()}
	
		
		
	
	
		
			
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Disabled

Disable the date picker to prevent user interaction.

```svelte



	Label
	
		
		
	
	
		
			
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Minimum and Maximum

Restrict date selection to a specific range using the `min` and `max` props with the `parseDate` helper function.

```svelte



	Label
	
		
		
	
	
		
			
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Range Selection

Enable range selection by setting `selectionMode="range"` on the root component. Use two input fields with `index={0}` and `index={1}` to represent the start and end dates.

```svelte



	Select Date Range
	
		
		
		
	
	
		
			
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Inline calendar

Display the calendar inline without a popover by adding the `inline` prop to the root component. When using inline mode, omit the `Portal` and `Positioner` components.

```svelte



	Label
	
		
			
				{#snippet children(datePicker)}
					
						
						
							
						
						
					
					
						
							
								{#each datePicker().weekDays as weekDay, id (id)}
									{weekDay.short}
								{/each}
							
						
						
							{#each datePicker().weeks as week, id (id)}
								
									{#each week as day, id (id)}
										
											{day.day}
										
									{/each}
								
							{/each}
						
					
				{/snippet}
			
		
		
			
				{#snippet children(datePicker)}
					
						
						
							
						
						
					
					
						
							{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
								
									{#each months as month, id (id)}
										
											{month.label}
										
									{/each}
								
							{/each}
						
					
				{/snippet}
			
		
		
			
				{#snippet children(datePicker)}
					
						
						
							
						
						
					
					
						
							{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
								
									{#each years as year, id (id)}
										
											{year.label}
										
									{/each}
								
							{/each}
						
					
				{/snippet}
			
		
	


```

## Month and Year Selection

Optionally add `` and `` components to provide dropdown selectors for quickly changing the month and year.

```svelte



	Label
	
		
		
	
	
		
			
				
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									
										{#each datePicker().weekDays as weekDay, id (id)}
											{weekDay.short}
										{/each}
									
								
								
									{#each datePicker().weeks as week, id (id)}
										
											{#each week as day, id (id)}
												
													{day.day}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
										
											{#each months as month, id (id)}
												
													{month.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
				
					
						{#snippet children(datePicker)}
							
								
								
									
								
								
							
							
								
									{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
										
											{#each years as year, id (id)}
												
													{year.label}
												
											{/each}
										
									{/each}
								
							
						{/snippet}
					
				
			
		
	


```

## Guidelines

### Portal

The Date Picker content is rendered inside a [Portal](/docs/components/portal) component by default to avoid z-index stacking issues. The Portal renders the content at the end of the document body.

### Views

The Date Picker supports three different views:

* **Day view** - Select a specific day from the calendar
* **Month view** - Select a month by clicking the view trigger when in day view
* **Year view** - Select a year by clicking the view trigger when in month view

Use the `` component with the `view` prop to define each view's layout.

### Context

The `` component provides access to the date picker API for rendering dynamic content like weeks, months, and years grids. Use the children snippet pattern to access the API.

### Parse Date

Use the `parseDate` helper function to convert strings or Date objects to the appropriate date format. Zag.js adjusts this using [@internationalized/date](https://github.com/adobe/react-spectrum/tree/main/packages/@internationalized/date) under the hood.

```svelte

```

## API Reference

### DatePickerRootProps

| Property              | Default  | Type                                                                                                                                                                                                                                                      | Description                                                                                                                                                                                 |
| --------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| locale?               | "en-US"  | string \| undefined                                                                                                                                                                                                                                       | The locale (BCP 47 language tag) to use when formatting the date.                                                                                                                           |
| translations?         | -        | IntlTranslations \| undefined                                                                                                                                                                                                                             | The localized messages to use.                                                                                                                                                              |
| ids?                  | -        | Partial\<\{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }> \| undefined | The ids of the elements in the date picker. Useful for composition.                                                                                                                         |
| name?                 | -        | string \| undefined                                                                                                                                                                                                                                       | The \`name\` attribute of the input element.                                                                                                                                                |
| timeZone?             | "UTC"    | string \| undefined                                                                                                                                                                                                                                       | The time zone to use                                                                                                                                                                        |
| disabled?             | -        | boolean \| undefined                                                                                                                                                                                                                                      | Whether the calendar is disabled.                                                                                                                                                           |
| readOnly?             | -        | boolean \| undefined                                                                                                                                                                                                                                      | Whether the calendar is read-only.                                                                                                                                                          |
| outsideDaySelectable? | false    | boolean \| undefined                                                                                                                                                                                                                                      | Whether day outside the visible range can be selected.                                                                                                                                      |
| min?                  | -        | DateValue \| undefined                                                                                                                                                                                                                                    | The minimum date that can be selected.                                                                                                                                                      |
| max?                  | -        | DateValue \| undefined                                                                                                                                                                                                                                    | The maximum date that can be selected.                                                                                                                                                      |
| closeOnSelect?        | true     | boolean \| undefined                                                                                                                                                                                                                                      | Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is \`multiple\`.                                                        |
| value?                | -        | DateValue\[] \| undefined                                                                                                                                                                                                                                 | The controlled selected date(s).                                                                                                                                                            |
| defaultValue?         | -        | DateValue\[] \| undefined                                                                                                                                                                                                                                 | The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker.                                                                 |
| focusedValue?         | -        | DateValue \| undefined                                                                                                                                                                                                                                    | The controlled focused date.                                                                                                                                                                |
| defaultFocusedValue?  | -        | DateValue \| undefined                                                                                                                                                                                                                                    | The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker.                                                                         |
| numOfMonths?          | -        | number \| undefined                                                                                                                                                                                                                                       | The number of months to display.                                                                                                                                                            |
| startOfWeek?          | -        | number \| undefined                                                                                                                                                                                                                                       | The first day of the week.
 \`0\` - Sunday
 \`1\` - Monday
 \`2\` - Tuesday
 \`3\` - Wednesday
 \`4\` - Thursday
 \`5\` - Friday
 \`6\` - Saturday              |
| fixedWeeks?           | -        | boolean \| undefined                                                                                                                                                                                                                                      | Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6.                                                                     |
| onValueChange?        | -        | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                                      | Function called when the value changes.                                                                                                                                                     |
| onFocusChange?        | -        | ((details: FocusChangeDetails) => void) \| undefined                                                                                                                                                                                                      | Function called when the focused date changes.                                                                                                                                              |
| onViewChange?         | -        | ((details: ViewChangeDetails) => void) \| undefined                                                                                                                                                                                                       | Function called when the view changes.                                                                                                                                                      |
| onOpenChange?         | -        | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                                                                                                       | Function called when the calendar opens or closes.                                                                                                                                          |
| isDateUnavailable?    | -        | ((date: DateValue, locale: string) => boolean) \| undefined                                                                                                                                                                                               | Returns whether a date of the calendar is available.                                                                                                                                        |
| selectionMode?        | "single" | SelectionMode \| undefined                                                                                                                                                                                                                                | The selection mode of the calendar.
- \`single\` - only one date can be selected
- \`multiple\` - multiple dates can be selected
- \`range\` - a range of dates can be selected |
| format?               | -        | ((date: DateValue, details: LocaleDetails) => string) \| undefined                                                                                                                                                                                        | The format of the date to display in the input.                                                                                                                                             |
| parse?                | -        | ((value: string, details: LocaleDetails) => DateValue \| undefined) \| undefined                                                                                                                                                                          | Function to parse the date from the input back to a DateValue.                                                                                                                              |
| placeholder?          | -        | string \| undefined                                                                                                                                                                                                                                       | The placeholder text to display in the input.                                                                                                                                               |
| view?                 | -        | DateView \| undefined                                                                                                                                                                                                                                     | The view of the calendar                                                                                                                                                                    |
| defaultView?          | "day"    | DateView \| undefined                                                                                                                                                                                                                                     | The default view of the calendar                                                                                                                                                            |
| minView?              | "day"    | DateView \| undefined                                                                                                                                                                                                                                     | The minimum view of the calendar                                                                                                                                                            |
| maxView?              | "year"   | DateView \| undefined                                                                                                                                                                                                                                     | The maximum view of the calendar                                                                                                                                                            |
| positioning?          | -        | PositioningOptions \| undefined                                                                                                                                                                                                                           | The user provided options used to position the date picker content                                                                                                                          |
| open?                 | -        | boolean \| undefined                                                                                                                                                                                                                                      | The controlled open state of the date picker                                                                                                                                                |
| defaultOpen?          | -        | boolean \| undefined                                                                                                                                                                                                                                      | The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker.                                                          |
| inline?               | -        | boolean \| undefined                                                                                                                                                                                                                                      | Whether to render the date picker inline                                                                                                                                                    |
| dir?                  | "ltr"    | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                               | The document's text/writing direction.                                                                                                                                                      |
| getRootNode?          | -        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                       | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                  |
| element?              | -        | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                                          | Render the element yourself                                                                                                                                                                 |

### DatePickerRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => DatePickerApi\                  | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => DatePickerApi\]> | -           |

### DatePickerLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### DatePickerControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerPresetTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| value    | -       | PresetTriggerValue                                  | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DatePickerInputProps

| Property   | Default | Type                                               | Description                             |
| ---------- | ------- | -------------------------------------------------- | --------------------------------------- |
| index?     | -       | number \| undefined                                | The index of the input to focus.        |
| fixOnBlur? | true    | boolean \| undefined                               | Whether to fix the input value on blur. |
| element?   | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself             |

### DatePickerTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DatePickerPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerYearSelectProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"select">]> \| undefined | Render the element yourself |

### DatePickerMonthSelectProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"select">]> \| undefined | Render the element yourself |

### DatePickerViewProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| view     | -       | DateView                                         | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerViewControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerPrevTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DatePickerViewTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DatePickerRangeTextProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DatePickerNextTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DatePickerTableProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"table">]> \| undefined | Render the element yourself |

### DatePickerTableHeadProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"thead">]> \| undefined | Render the element yourself |

### DatePickerTableRowProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"tr">]> \| undefined | Render the element yourself |

### DatePickerTableHeaderProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"th">]> \| undefined | Render the element yourself |

### DatePickerTableBodyProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"tbody">]> \| undefined | Render the element yourself |

### DatePickerTableCellProps

| Property      | Default | Type                                            | Description                 |
| ------------- | ------- | ----------------------------------------------- | --------------------------- |
| disabled?     | -       | boolean \| undefined                            | -                           |
| value         | -       | number \| DateValue                             | -                           |
| columns?      | -       | number \| undefined                             | -                           |
| visibleRange? | -       | VisibleRange \| undefined                       | -                           |
| element?      | -       | Snippet\<\[HTMLAttributes\<"td">]> \| undefined | Render the element yourself |

### DatePickerTableCellTriggerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Dialog

A modal dialog for displaying content and actions.

```svelte



	Trigger
	
		
		
			
				Hello World
				This is an example of a basic dialog.
				Close
			
		
	


```

## Alert Dialog

The [alertdialog](https://w3c.github.io/aria/#alertdialog) role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.

```svelte



	Trigger
	
		
		
			
				Alert
				Something important has happened!
				Close
			
		
	


```

## Interaction

If desired, you can disable click to close interactions for the backdrop. We recommend using this sparingly, as this traps the
user in this experience.

```svelte



	Trigger
	
		
		
			
				Dialog Title
				This dialog will only close with the Close button or via programmatic controls.
				Close
			
		
	


```

## Drawer

This example repurposes the Dialog for use as a side-panel Drawer. It also introduces basic transition animations.

```svelte



	Trigger
	
		
		
			
				
					Drawer Title
					
						
					
				
				This is example content for the slide out drawer panel.
			
		
	


```

## Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part.

```svelte



	Trigger
	
		
		
			
				Setting Z-Index
				This dialog will have a z-index value of 50.
				Close
			
		
	


```

## Direction

```svelte



	Trigger
	
		
		
			
				Hello World
				This is an example of a basic dialog.
				Close
			
		
	


```

## Headless

Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling.

```svelte



	
		
	
	
		
		
			
				
					
						Hello Skeleton
						×
					
					
					Three spooky skeletons!
				
			
		
	


```

The benefits are as follows:

* You can make the `Trigger` surround any element, including an icon, button, image, etc.
* You can modify the entire structure within `Content`, including custom markup and styling.
* You may place the `CloseTrigger` anywhere, and use it as an X close option.

## API Reference

### DialogRootProps

| Property                | Default  | Type                                                                                                                                                          | Description                                                                                                                    |
| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| dir?                    | "ltr"    | "ltr" \| "rtl" \| undefined                                                                                                                                   | The document's text/writing direction.                                                                                         |
| role?                   | "dialog" | "dialog" \| "alertdialog" \| undefined                                                                                                                        | The dialog's role                                                                                                              |
| aria-label?             | -        | string \| undefined                                                                                                                                           | Human readable label for the dialog, in event the dialog title is not rendered                                                 |
| ids?                    | -        | Partial\<\{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }> \| undefined | The ids of the elements in the dialog. Useful for composition.                                                                 |
| trapFocus?              | true     | boolean \| undefined                                                                                                                                          | Whether to trap focus inside the dialog when it's opened                                                                       |
| preventScroll?          | true     | boolean \| undefined                                                                                                                                          | Whether to prevent scrolling behind the dialog when it's opened                                                                |
| modal?                  | true     | boolean \| undefined                                                                                                                                          | Whether to prevent pointer interaction outside the element and hide all content below it                                       |
| initialFocusEl?         | -        | (() => MaybeElement) \| undefined                                                                                                                             | Element to receive focus when the dialog is opened                                                                             |
| finalFocusEl?           | -        | (() => MaybeElement) \| undefined                                                                                                                             | Element to receive focus when the dialog is closed                                                                             |
| restoreFocus?           | -        | boolean \| undefined                                                                                                                                          | Whether to restore focus to the element that had focus before the dialog was opened                                            |
| closeOnInteractOutside? | true     | boolean \| undefined                                                                                                                                          | Whether to close the dialog when the outside is clicked                                                                        |
| closeOnEscape?          | true     | boolean \| undefined                                                                                                                                          | Whether to close the dialog when the escape key is pressed                                                                     |
| open?                   | -        | boolean \| undefined                                                                                                                                          | The controlled open state of the dialog                                                                                        |
| defaultOpen?            | false    | boolean \| undefined                                                                                                                                          | The initial open state of the dialog when rendered.
Use when you don't need to control the open state of the dialog.       |
| onOpenChange?           | -        | ((details: OpenChangeDetails) => void) \| undefined                                                                                                           | Function to call when the dialog's open state changes                                                                          |
| getRootNode?            | -        | (() => Node \| ShadowRoot \| Document) \| undefined                                                                                                           | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                     |
| onEscapeKeyDown?        | -        | ((event: KeyboardEvent) => void) \| undefined                                                                                                                 | Function called when the escape key is pressed                                                                                 |
| onRequestDismiss?       | -        | ((event: LayerDismissEvent) => void) \| undefined                                                                                                             | Function called when this layer is closed due to a parent layer being closed                                                   |
| onPointerDownOutside?   | -        | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                       | Function called when the pointer is pressed down outside the component                                                         |
| onFocusOutside?         | -        | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                             | Function called when the focus is moved outside the component                                                                  |
| onInteractOutside?      | -        | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                          | Function called when an interaction happens outside the component                                                              |
| persistentElements?     | -        | (() => Element \| null)\[] \| undefined                                                                                                                       | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event |
| children?               | -        | Snippet\<\[]> \| undefined                                                                                                                                    | The default slot content to be rendered within the component.                                                                  |

### DialogRootProviderProps

| Property  | Default | Type                        | Description                                                   |
| --------- | ------- | --------------------------- | ------------------------------------------------------------- |
| value     | -       | () => DialogApi\ | -                                                             |
| children? | -       | Snippet\<\[]> \| undefined  | The default slot content to be rendered within the component. |

### DialogRootContextProps

| Property | Default | Type                                     | Description |
| -------- | ------- | ---------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => DialogApi\]> | -           |

### DialogTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### DialogBackdropProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DialogPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DialogContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DialogTitleProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DialogDescriptionProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### DialogCloseTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |


# File Upload

A component for uploading files with drag-and-drop and browse support.

```svelte



	Label
	
		Browse Files
		
	
	
		
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					
						{file.name}
						{file.size} bytes
						
					
				{/each}
			{/snippet}
		
	


```

## Custom Content

Supply your own text and icons within the dropzone.

```svelte



	
		
		Select file or drag here.
		Browse Files
		
	
	
		
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					
						{file.name}
						{file.size} bytes
						
					
				{/each}
			{/snippet}
		
	


```

## Disabled

```svelte



	
		Browse Files
		
	
	
		
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					
						{file.name}
						{file.size} bytes
						
					
				{/each}
			{/snippet}
		
	


```

## Button Only

```svelte



	Browse Files
	


```

## Clear Files

Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the `clearFiles` method.

```svelte



	
		
			Browse Files
			
		
		
			
				{#snippet children(fileUpload)}
					{#each fileUpload().acceptedFiles as file (file.name)}
						
							{file.name}
							{file.size} bytes
							
						
					{/each}
				{/snippet}
			
		
	

	


```

## Direction

```svelte



	Label
	
		Browse Files
		
	
	
		
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					
						{file.name}
						{file.size} bytes
						
					
				{/each}
			{/snippet}
		
	


```

## API Reference

### FileUploadRootProps

| Property              | Default  | Type                                                                                                                                                                                                                                                        | Description                                                                                                       |
| --------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| name?                 | -        | string \| undefined                                                                                                                                                                                                                                         | The name of the underlying file input                                                                             |
| ids?                  | -        | Partial\<\{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item: (id: string) => string; itemName: (id: string) => string; itemSizeText: (id: string) => string; itemPreview: (id: string) => string; }> \| undefined | The ids of the elements. Useful for composition.                                                                  |
| translations?         | -        | IntlTranslations \| undefined                                                                                                                                                                                                                               | The localized messages to use.                                                                                    |
| accept?               | -        | Record\ \| FileMimeType \| FileMimeType\[] \| undefined                                                                                                                                                                                  | The accept file types                                                                                             |
| disabled?             | -        | boolean \| undefined                                                                                                                                                                                                                                        | Whether the file input is disabled                                                                                |
| required?             | -        | boolean \| undefined                                                                                                                                                                                                                                        | Whether the file input is required                                                                                |
| allowDrop?            | true     | boolean \| undefined                                                                                                                                                                                                                                        | Whether to allow drag and drop in the dropzone element                                                            |
| maxFileSize?          | Infinity | number \| undefined                                                                                                                                                                                                                                         | The maximum file size in bytes                                                                                    |
| minFileSize?          | 0        | number \| undefined                                                                                                                                                                                                                                         | The minimum file size in bytes                                                                                    |
| maxFiles?             | 1        | number \| undefined                                                                                                                                                                                                                                         | The maximum number of files                                                                                       |
| preventDocumentDrop?  | true     | boolean \| undefined                                                                                                                                                                                                                                        | Whether to prevent the drop event on the document                                                                 |
| validate?             | -        | ((file: File, details: FileValidateDetails) => FileError\[] \| null) \| undefined                                                                                                                                                                           | Function to validate a file                                                                                       |
| defaultAcceptedFiles? | -        | File\[] \| undefined                                                                                                                                                                                                                                        | The default accepted files when rendered.
Use when you don't need to control the accepted files of the input. |
| acceptedFiles?        | -        | File\[] \| undefined                                                                                                                                                                                                                                        | The controlled accepted files                                                                                     |
| onFileChange?         | -        | ((details: FileChangeDetails) => void) \| undefined                                                                                                                                                                                                         | Function called when the value changes, whether accepted or rejected                                              |
| onFileAccept?         | -        | ((details: FileAcceptDetails) => void) \| undefined                                                                                                                                                                                                         | Function called when the file is accepted                                                                         |
| onFileReject?         | -        | ((details: FileRejectDetails) => void) \| undefined                                                                                                                                                                                                         | Function called when the file is rejected                                                                         |
| capture?              | -        | "user" \| "environment" \| undefined                                                                                                                                                                                                                        | The default camera to use when capturing media                                                                    |
| directory?            | -        | boolean \| undefined                                                                                                                                                                                                                                        | Whether to accept directories, only works in webkit browsers                                                      |
| invalid?              | -        | boolean \| undefined                                                                                                                                                                                                                                        | Whether the file input is invalid                                                                                 |
| transformFiles?       | -        | ((files: File\[]) => Promise\) \| undefined                                                                                                                                                                                                        | Function to transform the accepted files to apply transformations                                                 |
| locale?               | "en-US"  | string \| undefined                                                                                                                                                                                                                                         | The current locale. Based on the BCP 47 definition.                                                               |
| dir?                  | "ltr"    | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                 | The document's text/writing direction.                                                                            |
| getRootNode?          | -        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                         | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                        |
| element?              | -        | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                                            | Render the element yourself                                                                                       |

### FileUploadRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => FileUploadApi\                  | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### FileUploadRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => FileUploadApi\]> | -           |

### FileUploadLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### FileUploadDropzoneProps

| Property      | Default | Type                                             | Description                                        |
| ------------- | ------- | ------------------------------------------------ | -------------------------------------------------- |
| disableClick? | -       | boolean \| undefined                             | Whether to disable the click event on the dropzone |
| element?      | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself                        |

### FileUploadTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### FileUploadHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### FileUploadItemGroupProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"ul">]> \| undefined | Render the element yourself |

### FileUploadItemProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| file     | -       | File                                            | -                           |
| type?    | -       | ItemType \| undefined                           | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"li">]> \| undefined | Render the element yourself |

### FileUploadItemNameProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### FileUploadItemSizeTextProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### FileUploadItemDeleteTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |


# Listbox

Select one or more items from a list of options.

```svelte



	Label
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## Groups

Create labelled groups for your items.

```svelte



	Label
	
		{#each collection.group() as [type, items] (type)}
			
				{type}
				{#each items as item (item.value)}
					
						{item.label}
						
					
				{/each}
			
		{/each}
	


```

## Multiple

Select multiple items from the list.

```svelte



	Label
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## Disabled

Disable the entire listbox.

```svelte



	Label
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## Disabled Item

Disable specific items in the list.

```svelte



	Label
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## Search

Add a search input to filter items.

```svelte



	Label
	 (query = e.currentTarget.value)} />
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## Direction

Control the text direction of the listbox.

```svelte



	Label
	
		{#each collection.items as item (item.value)}
			
				{item.label}
				
			
		{/each}
	


```

## API Reference

### ListboxRootProps

| Property                 | Default    | Type                                                                                                                                                                                                             | Description                                                                                                                                                                                                                                                                       |
| ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| orientation?             | "vertical" | "horizontal" \| "vertical" \| undefined                                                                                                                                                                          | The orientation of the listbox.                                                                                                                                                                                                                                                   |
| collection               | -          | ListCollection\ \| GridCollection\                                                                                                                                                                     | The item collection                                                                                                                                                                                                                                                               |
| ids?                     | -          | Partial\<\{ root: string; content: string; label: string; item: (id: string \| number) => string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }> \| undefined | The ids of the elements in the listbox. Useful for composition.                                                                                                                                                                                                                   |
| disabled?                | -          | boolean \| undefined                                                                                                                                                                                             | Whether the listbox is disabled                                                                                                                                                                                                                                                   |
| disallowSelectAll?       | -          | boolean \| undefined                                                                                                                                                                                             | Whether to disallow selecting all items when \`meta+a\` is pressed                                                                                                                                                                                                                |
| onHighlightChange?       | -          | ((details: HighlightChangeDetails\) => void) \| undefined                                                                                                                                                   | The callback fired when the highlighted item changes.                                                                                                                                                                                                                             |
| onValueChange?           | -          | ((details: ValueChangeDetails\) => void) \| undefined                                                                                                                                                       | The callback fired when the selected item changes.                                                                                                                                                                                                                                |
| value?                   | -          | string\[] \| undefined                                                                                                                                                                                           | The controlled keys of the selected items                                                                                                                                                                                                                                         |
| defaultValue?            | \[]        | string\[] \| undefined                                                                                                                                                                                           | The initial default value of the listbox when rendered.
Use when you don't need to control the value of the listbox.                                                                                                                                                          |
| highlightedValue?        | -          | string \| null \| undefined                                                                                                                                                                                      | The controlled key of the highlighted item                                                                                                                                                                                                                                        |
| defaultHighlightedValue? | -          | string \| null \| undefined                                                                                                                                                                                      | The initial value of the highlighted item when opened.
Use when you don't need to control the highlighted value of the listbox.                                                                                                                                               |
| loopFocus?               | false      | boolean \| undefined                                                                                                                                                                                             | Whether to loop the keyboard navigation through the options                                                                                                                                                                                                                       |
| selectionMode?           | "single"   | SelectionMode \| undefined                                                                                                                                                                                       | How multiple selection should behave in the listbox.

- \`single\`: The user can select a single item.
- \`multiple\`: The user can select multiple items without using modifier keys.
- \`extended\`: The user can select multiple items by using modifier keys. |
| scrollToIndexFn?         | -          | ((details: ScrollToIndexDetails) => void) \| undefined                                                                                                                                                           | Function to scroll to a specific index                                                                                                                                                                                                                                            |
| selectOnHighlight?       | -          | boolean \| undefined                                                                                                                                                                                             | Whether to select the item when it is highlighted                                                                                                                                                                                                                                 |
| deselectable?            | -          | boolean \| undefined                                                                                                                                                                                             | Whether to disallow empty selection                                                                                                                                                                                                                                               |
| typeahead?               | -          | boolean \| undefined                                                                                                                                                                                             | Whether to enable typeahead on the listbox                                                                                                                                                                                                                                        |
| onSelect?                | -          | ((details: SelectionDetails) => void) \| undefined                                                                                                                                                               | Function called when an item is selected                                                                                                                                                                                                                                          |
| dir?                     | "ltr"      | "ltr" \| "rtl" \| undefined                                                                                                                                                                                      | The document's text/writing direction.                                                                                                                                                                                                                                            |
| getRootNode?             | -          | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                              | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                                                        |
| element?                 | -          | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                 | Render the element yourself                                                                                                                                                                                                                                                       |

### ListboxRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => ListboxApi\                | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ListboxRootContextProps

| Property | Default | Type                                           | Description |
| -------- | ------- | ---------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => ListboxApi\]> | -           |

### ListboxLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### ListboxInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### ListboxContentProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"ul">]> \| undefined | Render the element yourself |

### ListboxItemGroupProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ListboxItemGroupLabelProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ListboxItemProps

| Property          | Default | Type                                            | Description                            |
| ----------------- | ------- | ----------------------------------------------- | -------------------------------------- |
| item              | -       | any                                             | The item to render                     |
| highlightOnHover? | -       | boolean \| undefined                            | Whether to highlight the item on hover |
| element?          | -       | Snippet\<\[HTMLAttributes\<"li">]> \| undefined | Render the element yourself            |

### ListboxItemTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### ListboxItemIndicatorProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |


# Navigation

A flexible navigation interface for large, medium, and small screens.

## Bar

```svelte



	
		Contents
	
	
	
		
			{#each links as link (link)}
				{@const Icon = link.icon}
				
					
					{link.label}
				
			{/each}
		
	
	


```

* Recommended for small sized screens (ex: mobile).
* Ideal for vertical screen layouts.
* Should be fixed to the bottom of the viewport.
* Supports 3-5 tiles based on contents and viewport width.
* Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

## Rail

```svelte



	
	
		
			
				
			
		
		
			
				{#each links as link (link)}
					{@const Icon = link.icon}
					
						
						{link.label}
					
				{/each}
			
		
		
			
				
			
		
	
	
	
		Contents
	


```

* Recommended for medium sized screens (ex: tablet).
* Ideal for horizontal screen layouts.
* Should be fixed to the left or right of the viewport.
* Supports 3-7 tiles based on contents and viewport height.

## Sidebar

```svelte



	
	
		
			
				
			
		
		
			
				
					
						
						Home
					
				
			
			{#each Object.entries(linksSidebar) as [category, links]}
				
					{category}
					
						{#each links as link (link)}
							{@const Icon = link.icon}
							
								
								{link.label}
							
						{/each}
					
				
			{/each}
		
		
			
				
				Settings
			
		
	
	
	
		Contents
	


```

* Recommended for large sized screens (ex: desktop).
* Ideal for horizontal screen layouts.
* Should be fixed to the left or right of the viewport.
* Supports multiple groups of links for deep navigation.
* Supports a label field per each group.
* Can scroll vertically if contents extend beyond the viewport height.

## Toggle Layout

Using reactive state we can dynamically switch between multiple layouts. Tap the double arrow icon to toggle.

```svelte



	
	
		
			
				{#each links as link (link)}
					{@const Icon = link.icon}
					
						
						{link.label}
					
				{/each}
			
		
		
			
		
	
	
	
		Layout: {layoutRail ? 'Rail' : 'Sidebar'}
	


```

## API Reference

### NavigationRootProps

| Property | Default | Type                                             | Description                                                                                  |
| -------- | ------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| layout?  | bar     | "bar" \| "rail" \| "sidebar" \| undefined        | Sets the data-layout attribute, which modifies the visual presentation of the component set. |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself                                                                  |

### NavigationHeaderProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"header">]> \| undefined | Render the element yourself |

### NavigationContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### NavigationGroupProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### NavigationLabelProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### NavigationMenuProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### NavigationFooterProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"footer">]> \| undefined | Render the element yourself |


# Pagination

Navigate between multiple pages of content.

```svelte





	
			{#each data as user}
				
			{/each}
		
		
			
				ID
				Name
				Email
				Country
			
		
		
					{user.id}
					{user.name}
					{user.email}
					{user.country}
				
	

	 (page = event.page)}>
		
			
		
		
			{#snippet children(pagination)}
				{#each pagination().pages as page, index (page)}
					{#if page.type === 'page'}
						
							{page.value}
						
					{:else}
						…
					{/if}
				{/each}
			{/snippet}
		
		
			
		
	


```

## Page Size

```svelte





	
			{#each data as user}
				
			{/each}
		
		
			
				ID
				Name
				Email
				Country
			
		
		
					{user.id}
					{user.name}
					{user.email}
					{user.country}
				
	

	
		
			Page Size
			
		
		 (page = event.page)}>
			
				
			
			
				{#snippet children(pagination)}
					{#each pagination().pages as page, index (page)}
						{#if page.type === 'page'}
							
								{page.value}
							
						{:else}
							…
						{/if}
					{/each}
				{/snippet}
			
			
				
			
		
	


```

## Direction

```svelte





	
			{#each data as user}
				
			{/each}
		
		
			
				ID
				Name
				Email
				Country
			
		
		
					{user.id}
					{user.name}
					{user.email}
					{user.country}
				
	

	 (page = event.page)} dir="rtl">
		
			
		
		
			{#snippet children(pagination)}
				{#each pagination().pages as page, index (page)}
					{#if page.type === 'page'}
						
							{page.value}
						
					{:else}
						…
					{/if}
				{/each}
			{/snippet}
		
		
			
		
	


```

## Total Count

For server-side pagination, your data source may be truncated. Make sure to specify the total records using `count`.

```json
{
	"data": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```

{/* prettier-ignore */}

```svelte

	...

```

## API Reference

### PaginationRootProps

| Property          | Default  | Type                                                                                                                                                     | Description                                                                                                                      |
| ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| ids?              | -        | Partial\<\{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }> \| undefined | The ids of the elements in the accordion. Useful for composition.                                                                |
| translations?     | -        | IntlTranslations \| undefined                                                                                                                            | Specifies the localized strings that identifies the accessibility elements and their states                                      |
| count?            | -        | number \| undefined                                                                                                                                      | Total number of data items                                                                                                       |
| pageSize?         | -        | number \| undefined                                                                                                                                      | The controlled number of data items per page                                                                                     |
| defaultPageSize?  | 10       | number \| undefined                                                                                                                                      | The initial number of data items per page when rendered.
Use when you don't need to control the page size of the pagination. |
| siblingCount?     | 1        | number \| undefined                                                                                                                                      | Number of pages to show beside active page                                                                                       |
| page?             | -        | number \| undefined                                                                                                                                      | The controlled active page                                                                                                       |
| defaultPage?      | 1        | number \| undefined                                                                                                                                      | The initial active page when rendered.
Use when you don't need to control the active page of the pagination.                 |
| onPageChange?     | -        | ((details: PageChangeDetails) => void) \| undefined                                                                                                      | Called when the page number is changed                                                                                           |
| onPageSizeChange? | -        | ((details: PageSizeChangeDetails) => void) \| undefined                                                                                                  | Called when the page size is changed                                                                                             |
| type?             | "button" | "button" \| "link" \| undefined                                                                                                                          | The type of the trigger element                                                                                                  |
| getPageUrl?       | -        | ((details: PageUrlDetails) => string) \| undefined                                                                                                       | Function to generate href attributes for pagination links.
Only used when \`type\` is set to "link".                         |
| dir?              | "ltr"    | "ltr" \| "rtl" \| undefined                                                                                                                              | The document's text/writing direction.                                                                                           |
| getRootNode?      | -        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                      | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                       |
| element?          | -        | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                         | Render the element yourself                                                                                                      |

### PaginationRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => PaginationApi\                  | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PaginationRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => PaginationApi\]> | -           |

### PaginationPrevTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### PaginationItemProps

| Property | Default | Type                                           | Description                 |
| -------- | ------- | ---------------------------------------------- | --------------------------- |
| type     | -       | "page"                                         | -                           |
| value    | -       | number                                         | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"a">]> \| undefined | Render the element yourself |

### PaginationEllipsisProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| index    | -       | number                                            | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### PaginationNextTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |


# Popover

A component that displays content in a floating panel, triggered by user interaction.

```svelte



	Trigger
	
		
			
				Example
				This is a basic example of a popover.
				Close
			
		
	


```

## Arrow

You may optionally enable arrows via the `Arrow` and `ArrowTip` component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a `style` attribute.

```svelte



	Trigger
	
		
			
				This example will have a small arrow.
				
					
				
			
		
	


```

## Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part.

> NOTE: This will need to be forced using `!` for `!important` to override the Zag.js defaults.

```svelte



	
		Default (auto)
		
			
				
					This example will be below the sibling.
				
			
		
	

	
		Above (20)
		
			
				
					This example will be above the sibling.
				
			
		
	

	
		Sibling (10)
	


```

## Programmatic Control

This is made possible via the Provider Pattern.

```svelte



	

	
		Anchor
		
			
				
					This popover will appear, stay open for three seconds, then close on it's own.
				
			
		
	


```

## Direction

```svelte



	Trigger
	
		
			
				Example
				This is a basic example of a popover.
				Close
			
		
	


```

## Headless

Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling.

```svelte



	
		
	
	
		
			
				
					
						Hello Skeleton
						×
					
					
					Three spooky skeletons!
				
			
		
	


```

The benefits are as follows:

* You can make the `Trigger` surround any element, including an icon, button, image, etc.
* You can modify the entire structure within `Content`, including custom markup and styling.
* You may place the `CloseTrigger` anywhere, and use it as an X close option.

## API Reference

### PopoverRootProps

| Property                | Default | Type                                                                                                                                                                       | Description                                                                                                                                                                                                                                           |
| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dir?                    | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                                                                                | The document's text/writing direction.                                                                                                                                                                                                                |
| ids?                    | -       | Partial\<\{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> \| undefined | The ids of the elements in the popover. Useful for composition.                                                                                                                                                                                       |
| modal?                  | false   | boolean \| undefined                                                                                                                                                       | Whether the popover should be modal. When set to \`true\`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover |
| portalled?              | true    | boolean \| undefined                                                                                                                                                       | Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
of the popover content.                                                                                                                     |
| autoFocus?              | true    | boolean \| undefined                                                                                                                                                       | Whether to automatically set focus on the first focusable
content within the popover when opened.                                                                                                                                                 |
| initialFocusEl?         | -       | (() => HTMLElement \| null) \| undefined                                                                                                                                   | The element to focus on when the popover is opened.                                                                                                                                                                                                   |
| closeOnInteractOutside? | true    | boolean \| undefined                                                                                                                                                       | Whether to close the popover when the user clicks outside of the popover.                                                                                                                                                                             |
| closeOnEscape?          | true    | boolean \| undefined                                                                                                                                                       | Whether to close the popover when the escape key is pressed.                                                                                                                                                                                          |
| onOpenChange?           | -       | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                        | Function invoked when the popover opens or closes                                                                                                                                                                                                     |
| positioning?            | -       | PositioningOptions \| undefined                                                                                                                                            | The user provided options used to position the popover content                                                                                                                                                                                        |
| open?                   | -       | boolean \| undefined                                                                                                                                                       | The controlled open state of the popover                                                                                                                                                                                                              |
| defaultOpen?            | -       | boolean \| undefined                                                                                                                                                       | The initial open state of the popover when rendered.
Use when you don't need to control the open state of the popover.                                                                                                                            |
| getRootNode?            | -       | (() => Node \| ShadowRoot \| Document) \| undefined                                                                                                                        | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                            |
| onEscapeKeyDown?        | -       | ((event: KeyboardEvent) => void) \| undefined                                                                                                                              | Function called when the escape key is pressed                                                                                                                                                                                                        |
| onRequestDismiss?       | -       | ((event: LayerDismissEvent) => void) \| undefined                                                                                                                          | Function called when this layer is closed due to a parent layer being closed                                                                                                                                                                          |
| onPointerDownOutside?   | -       | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                    | Function called when the pointer is pressed down outside the component                                                                                                                                                                                |
| onFocusOutside?         | -       | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                          | Function called when the focus is moved outside the component                                                                                                                                                                                         |
| onInteractOutside?      | -       | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                       | Function called when an interaction happens outside the component                                                                                                                                                                                     |
| persistentElements?     | -       | (() => Element \| null)\[] \| undefined                                                                                                                                    | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event                                                                                                                        |
| children?               | -       | Snippet\<\[]> \| undefined                                                                                                                                                 | The default slot content to be rendered within the component.                                                                                                                                                                                         |

### PopoverRootProviderProps

| Property  | Default | Type                         | Description                                                   |
| --------- | ------- | ---------------------------- | ------------------------------------------------------------- |
| value     | -       | () => PopoverApi\ | -                                                             |
| children? | -       | Snippet\<\[]> \| undefined   | The default slot content to be rendered within the component. |

### PopoverRootContextProps

| Property | Default | Type                                      | Description |
| -------- | ------- | ----------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => PopoverApi\]> | -           |

### PopoverTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### PopoverPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverArrowProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverArrowTipProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverTitleProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverDescriptionProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### PopoverCloseTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |


# Portal

Renders children into a DOM node that exists outside the DOM hierarchy.

```svelte



	
	
		
			
		
	

	
	
		
	

	
	


```

## How It Works

When enabled, the content will move from the source to the target element.

## API Reference

### PortalRootProps

| Property  | Default       | Type                     | Description                                                                       |
| --------- | ------------- | ------------------------ | --------------------------------------------------------------------------------- |
| disabled? | false         | boolean \| undefined     | If true, the portal functionality is disabled and children are rendered in place. |
| target?   | document.body | HTMLElement \| undefined | The HTML element to which the portal content will be appended.                    |
| children  | -             | Snippet\<\[]>            | The default slot content to be rendered within the component.                     |


# Progress Circular

An indicator showing the progress or completion of a task.

```svelte



	
		Label
		
			
			
		
		
	
	 (value = e.value[0])} step={10}>
		
			
				
			
			
				
			
		
	


```

## Size

```svelte



	
		
			
			
		
	
	
		
			
			
		
	
	
		
			
			
		
	


```

## Color

```svelte



	
		
			
			
		
	
	
		
			
			
		
	
	
		
			
			
		
	


```

## Centered Content

```svelte



	
		
	
	
		
		
	


```

## Indeterminate

Set the value to `null` to make the progress indeterminate.

```svelte



	
		
		
	
	


```

## Format

Use the `format` prop to customize the output of the `ValueText` component, options are:

* `percentage` (default) - shows the percentage value
* `decimal` - shows the decimal value (0.0 - 1.0)
* Provide formatting using the [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

```svelte



	
		
			
			
		
		
	
	
		
			
			
		
		
	
	
		
			
			
		
		
	


```

## Custom Value Text

```svelte



	
		
		
	
	
		
			{#snippet children(progress)}
				{progress().value} of {progress().max}
			{/snippet}
		
	


```

## API Reference

### ProgressRootProps

| Property       | Default               | Type                                                                                    | Description                                                                                                                |
| -------------- | --------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ids?           | -                     | Partial\<\{ root: string; track: string; label: string; circle: string; }> \| undefined | The ids of the elements in the progress bar. Useful for composition.                                                       |
| value?         | -                     | number \| null \| undefined                                                             | The controlled value of the progress bar.                                                                                  |
| defaultValue?  | 50                    | number \| null \| undefined                                                             | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| min?           | 0                     | number \| undefined                                                                     | The minimum allowed value of the progress bar.                                                                             |
| max?           | 100                   | number \| undefined                                                                     | The maximum allowed value of the progress bar.                                                                             |
| translations?  | -                     | IntlTranslations \| undefined                                                           | The localized messages to use.                                                                                             |
| onValueChange? | -                     | ((details: ValueChangeDetails) => void) \| undefined                                    | Callback fired when the value changes.                                                                                     |
| formatOptions? | \{ style: "percent" } | NumberFormatOptions \| undefined                                                        | The options to use for formatting the value.                                                                               |
| locale?        | "en-US"               | string \| undefined                                                                     | The locale to use for formatting the value.                                                                                |
| dir?           | "ltr"                 | "ltr" \| "rtl" \| undefined                                                             | The document's text/writing direction.                                                                                     |
| getRootNode?   | -                     | (() => ShadowRoot \| Node \| Document) \| undefined                                     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 |
| orientation?   | "horizontal"          | "horizontal" \| "vertical" \| undefined                                                 | The orientation of the element.                                                                                            |
| element?       | -                     | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                        | Render the element yourself                                                                                                |

### ProgressRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => ProgressApi\                    | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressRootContextProps

| Property | Default | Type                                       | Description |
| -------- | ------- | ------------------------------------------ | ----------- |
| children | -       | Snippet\<\[() => ProgressApi\]> | -           |

### ProgressLabelProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressValueTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### ProgressTrackProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressRangeProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressCircleProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"svg">]> \| undefined | Render the element yourself |

### ProgressCircleTrackProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined | Render the element yourself |

### ProgressCircleRangeProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined | Render the element yourself |


# Progress Linear

An indicator showing the progress or completion of a task.

```svelte



	{value}%
	
		
	


```

## Color

Provide background color values for the track and range to customize the colors.

```svelte



	
		
			
		
	
	
		
			
		
	
	
		
			
		
	


```

## Height

```svelte



	
		
			
		
	
	
		
			
		
	
	
		
			
		
	


```

## Orientation

For vertical orieintation, a height must be defined on the Track component. The default is `h-[100px]`.

```svelte



	
		
	


```

## Indeterminate

You must explicitely specify a `null` value to trigger indeterminate mode.

```svelte



	
		
	


```

### Custom Animation

```svelte



	
		
	




```

Consider using following variants to target the orientation and state.

* `data-[orientation=horizontal]:my-custom-animation` - target the horizontal orientation.
* `data-[orientation=vertical]:my-custom-animation` - target the vertical orientation.
* `data-[state=indeterminate]:my-custom-animation` - target the indeterminate state.

## Native Alternative

The native [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) element is available cross browser, but does not support indeterminate animations.

```svelte


```

## Direction

```svelte



	Label
	
		
	


```

## API Reference

### ProgressRootProps

| Property       | Default               | Type                                                                                    | Description                                                                                                                |
| -------------- | --------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ids?           | -                     | Partial\<\{ root: string; track: string; label: string; circle: string; }> \| undefined | The ids of the elements in the progress bar. Useful for composition.                                                       |
| value?         | -                     | number \| null \| undefined                                                             | The controlled value of the progress bar.                                                                                  |
| defaultValue?  | 50                    | number \| null \| undefined                                                             | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| min?           | 0                     | number \| undefined                                                                     | The minimum allowed value of the progress bar.                                                                             |
| max?           | 100                   | number \| undefined                                                                     | The maximum allowed value of the progress bar.                                                                             |
| translations?  | -                     | IntlTranslations \| undefined                                                           | The localized messages to use.                                                                                             |
| onValueChange? | -                     | ((details: ValueChangeDetails) => void) \| undefined                                    | Callback fired when the value changes.                                                                                     |
| formatOptions? | \{ style: "percent" } | NumberFormatOptions \| undefined                                                        | The options to use for formatting the value.                                                                               |
| locale?        | "en-US"               | string \| undefined                                                                     | The locale to use for formatting the value.                                                                                |
| dir?           | "ltr"                 | "ltr" \| "rtl" \| undefined                                                             | The document's text/writing direction.                                                                                     |
| getRootNode?   | -                     | (() => ShadowRoot \| Node \| Document) \| undefined                                     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 |
| orientation?   | "horizontal"          | "horizontal" \| "vertical" \| undefined                                                 | The orientation of the element.                                                                                            |
| element?       | -                     | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                        | Render the element yourself                                                                                                |

### ProgressRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => ProgressApi\                    | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressRootContextProps

| Property | Default | Type                                       | Description |
| -------- | ------- | ------------------------------------------ | ----------- |
| children | -       | Snippet\<\[() => ProgressApi\]> | -           |

### ProgressLabelProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressValueTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### ProgressTrackProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressRangeProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ProgressCircleProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"svg">]> \| undefined | Render the element yourself |

### ProgressCircleTrackProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined | Render the element yourself |

### ProgressCircleRangeProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined | Render the element yourself |


# Rating Group

Rating Group allows users to rate something

```svelte



	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
				{/each}
			{/snippet}
		
	
	


```

## Allow Half

```svelte



	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
				{/each}
			{/snippet}
		
	
	


```

## Custom Icons

```svelte



	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
						{#snippet empty()}
							
						{/snippet}
						{#snippet full()}
							
						{/snippet}
					
				{/each}
			{/snippet}
		
	
	


```

## Label

```svelte



	Rate us:
	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
				{/each}
			{/snippet}
		
	
	


```

## Disabled

```svelte



	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
				{/each}
			{/snippet}
		
	
	


```

## Direction

```svelte



	Label
	
		
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					
				{/each}
			{/snippet}
		
	
	


```

## API Reference

### RatingGroupRootProps

| Property       | Default | Type                                                                                                                         | Description                                                                                                    |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ids?           | -       | Partial\<\{ root: string; label: string; hiddenInput: string; control: string; item: (id: string) => string; }> \| undefined | The ids of the elements in the rating. Useful for composition.                                                 |
| translations?  | -       | IntlTranslations \| undefined                                                                                                | Specifies the localized strings that identifies the accessibility elements and their states                    |
| count?         | 5       | number \| undefined                                                                                                          | The total number of ratings.                                                                                   |
| name?          | -       | string \| undefined                                                                                                          | The name attribute of the rating element (used in forms).                                                      |
| form?          | -       | string \| undefined                                                                                                          | The associate form of the underlying input element.                                                            |
| value?         | -       | number \| undefined                                                                                                          | The controlled value of the rating                                                                             |
| defaultValue?  | -       | number \| undefined                                                                                                          | The initial value of the rating when rendered.
Use when you don't need to control the value of the rating. |
| readOnly?      | -       | boolean \| undefined                                                                                                         | Whether the rating is readonly.                                                                                |
| disabled?      | -       | boolean \| undefined                                                                                                         | Whether the rating is disabled.                                                                                |
| required?      | -       | boolean \| undefined                                                                                                         | Whether the rating is required.                                                                                |
| allowHalf?     | -       | boolean \| undefined                                                                                                         | Whether to allow half stars.                                                                                   |
| autoFocus?     | -       | boolean \| undefined                                                                                                         | Whether to autofocus the rating.                                                                               |
| onValueChange? | -       | ((details: ValueChangeDetails) => void) \| undefined                                                                         | Function to be called when the rating value changes.                                                           |
| onHoverChange? | -       | ((details: HoverChangeDetails) => void) \| undefined                                                                         | Function to be called when the rating value is hovered.                                                        |
| dir?           | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                                  | The document's text/writing direction.                                                                         |
| getRootNode?   | -       | (() => ShadowRoot \| Node \| Document) \| undefined                                                                          | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                     |
| element?       | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                             | Render the element yourself                                                                                    |

### RatingGroupRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => RatingGroupApi\                 | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### RatingGroupRootContextProps

| Property | Default | Type                                          | Description |
| -------- | ------- | --------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => RatingGroupApi\]> | -           |

### RatingGroupLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### RatingGroupControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### RatingGroupItemProps

| Property | Default         | Type                                              | Description                                                |
| -------- | --------------- | ------------------------------------------------- | ---------------------------------------------------------- |
| empty?   | StarEmpty (SVG) | Snippet\<\[]> \| undefined                        | The content to render when the item is in the empty state. |
| half?    | StarHalf (SVG)  | Snippet\<\[]> \| undefined                        | The content to render when the item is in the half state.  |
| full?    | StarFull (SVG)  | Snippet\<\[]> \| undefined                        | The content to render when the item is in the full state.  |
| index    | -               | number                                            | -                                                          |
| element? | -               | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself                                |

### RatingGroupHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |


# Segmented Control

Capture input for a limited set of options.

```svelte



	Label
	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## Icons

```svelte



	
		
		
			
				
			
			
		
		
			
				
			
			
		
		
			
				
			
			
		
	


```

## Orientation

```svelte



	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## Read Only

```svelte



	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## Disabled

```svelte



	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## Disabled Item

```svelte



	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## Direction

```svelte



	Label
	
		
		
			Item 1
			
		
		
			Item 2
			
		
		
			Item 3
			
		
	


```

## API Reference

### SegmentedControlRootProps

| Property       | Default | Type                                                                                                                                                                                                                                   | Description                                                                                                                |
| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ids?           | -       | Partial\<\{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> \| undefined | The ids of the elements in the radio. Useful for composition.                                                              |
| value?         | -       | string \| null \| undefined                                                                                                                                                                                                            | The controlled value of the radio group                                                                                    |
| defaultValue?  | -       | string \| null \| undefined                                                                                                                                                                                                            | The initial value of the checked radio when rendered.
Use when you don't need to control the value of the radio group. |
| name?          | -       | string \| undefined                                                                                                                                                                                                                    | The name of the input fields in the radio
(Useful for form submission).                                                |
| form?          | -       | string \| undefined                                                                                                                                                                                                                    | The associate form of the underlying input.                                                                                |
| disabled?      | -       | boolean \| undefined                                                                                                                                                                                                                   | If \`true\`, the radio group will be disabled                                                                              |
| readOnly?      | -       | boolean \| undefined                                                                                                                                                                                                                   | Whether the checkbox is read-only                                                                                          |
| onValueChange? | -       | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                   | Function called once a radio is checked                                                                                    |
| orientation?   | -       | "horizontal" \| "vertical" \| undefined                                                                                                                                                                                                | Orientation of the radio group                                                                                             |
| dir?           | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                            | The document's text/writing direction.                                                                                     |
| getRootNode?   | -       | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                    | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 |
| element?       | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                       | Render the element yourself                                                                                                |

### SegmentedControlRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => RadioGroupApi\                  | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SegmentedControlRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => RadioGroupApi\]> | -           |

### SegmentedControlLabelProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### SegmentedControlControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SegmentedControlIndicatorProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SegmentedControlItemProps

| Property  | Default | Type                                               | Description                 |
| --------- | ------- | -------------------------------------------------- | --------------------------- |
| value     | -       | string                                             | -                           |
| disabled? | -       | boolean \| undefined                               | -                           |
| invalid?  | -       | boolean \| undefined                               | -                           |
| element?  | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### SegmentedControlItemTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### SegmentedControlItemHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |


# Slider

Capture input from a range of values.

```svelte



	Label
	
		
			
		
		
			
		
	
	
		
		
		
	


```

## Color

```svelte



	
		
			
				
			
			
				
			
		
	

	
		
			
				
			
			
				
			
		
	

	
		
			
				
			
			
				
			
		
	


```

## Disabled

```svelte



	
		
			
		
		
			
		
	


```

## Readonly

```svelte



	
		
			
		
		
			
		
	


```

## Multiple Thumbs

```svelte



	
		
			
		
		
			
		
		
			
		
	


```

## Direction

```svelte



	Label
	
		
			
		
		
			
		
	
	
		
		
		
	


```

## API Reference

### SliderRootProps

| Property               | Default      | Type                                                                                                                                                                                                                                    | Description                                                                                                                                                                                                                                                                                                          |
| ---------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ids?                   | -            | Partial\<\{ root: string; thumb: (index: number) => string; hiddenInput: (index: number) => string; control: string; track: string; range: string; label: string; valueText: string; marker: (index: number) => string; }> \| undefined | The ids of the elements in the slider. Useful for composition.                                                                                                                                                                                                                                                       |
| aria-label?            | -            | string\[] \| undefined                                                                                                                                                                                                                  | The aria-label of each slider thumb. Useful for providing an accessible name to the slider                                                                                                                                                                                                                           |
| aria-labelledby?       | -            | string\[] \| undefined                                                                                                                                                                                                                  | The \`id\` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider                                                                                                                                                                                                      |
| name?                  | -            | string \| undefined                                                                                                                                                                                                                     | The name associated with each slider thumb (when used in a form)                                                                                                                                                                                                                                                     |
| form?                  | -            | string \| undefined                                                                                                                                                                                                                     | The associate form of the underlying input element.                                                                                                                                                                                                                                                                  |
| value?                 | -            | number\[] \| undefined                                                                                                                                                                                                                  | The controlled value of the slider                                                                                                                                                                                                                                                                                   |
| defaultValue?          | -            | number\[] \| undefined                                                                                                                                                                                                                  | The initial value of the slider when rendered.
Use when you don't need to control the value of the slider.                                                                                                                                                                                                       |
| disabled?              | -            | boolean \| undefined                                                                                                                                                                                                                    | Whether the slider is disabled                                                                                                                                                                                                                                                                                       |
| readOnly?              | -            | boolean \| undefined                                                                                                                                                                                                                    | Whether the slider is read-only                                                                                                                                                                                                                                                                                      |
| invalid?               | -            | boolean \| undefined                                                                                                                                                                                                                    | Whether the slider is invalid                                                                                                                                                                                                                                                                                        |
| onValueChange?         | -            | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                    | Function invoked when the value of the slider changes                                                                                                                                                                                                                                                                |
| onValueChangeEnd?      | -            | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                    | Function invoked when the slider value change is done                                                                                                                                                                                                                                                                |
| onFocusChange?         | -            | ((details: FocusChangeDetails) => void) \| undefined                                                                                                                                                                                    | Function invoked when the slider's focused index changes                                                                                                                                                                                                                                                             |
| getAriaValueText?      | -            | ((details: ValueTextDetails) => string) \| undefined                                                                                                                                                                                    | Function that returns a human readable value for the slider thumb                                                                                                                                                                                                                                                    |
| min?                   | 0            | number \| undefined                                                                                                                                                                                                                     | The minimum value of the slider                                                                                                                                                                                                                                                                                      |
| max?                   | 100          | number \| undefined                                                                                                                                                                                                                     | The maximum value of the slider                                                                                                                                                                                                                                                                                      |
| step?                  | 1            | number \| undefined                                                                                                                                                                                                                     | The step value of the slider                                                                                                                                                                                                                                                                                         |
| minStepsBetweenThumbs? | 0            | number \| undefined                                                                                                                                                                                                                     | The minimum permitted steps between multiple thumbs.

\`minStepsBetweenThumbs\` \* \`step\` should reflect the gap between the thumbs.

- \`step: 1\` and \`minStepsBetweenThumbs: 10\` => gap is \`10\`
- \`step: 10\` and \`minStepsBetweenThumbs: 2\` => gap is \`20\`                        |
| orientation?           | "horizontal" | "vertical" \| "horizontal" \| undefined                                                                                                                                                                                                 | The orientation of the slider                                                                                                                                                                                                                                                                                        |
| origin?                | "start"      | "start" \| "center" \| "end" \| undefined                                                                                                                                                                                               | The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end |
| thumbAlignment?        | "contain"    | "center" \| "contain" \| undefined                                                                                                                                                                                                      | The alignment of the slider thumb relative to the track
- \`center\`: the thumb will extend beyond the bounds of the slider track.
- \`contain\`: the thumb will be contained within the bounds of the track.                                                                                                |
| thumbSize?             | -            | \{ width: number; height: number; } \| undefined                                                                                                                                                                                        | The slider thumbs dimensions                                                                                                                                                                                                                                                                                         |
| dir?                   | "ltr"        | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                             | The document's text/writing direction.                                                                                                                                                                                                                                                                               |
| getRootNode?           | -            | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                                                                                           |
| element?               | -            | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                        | Render the element yourself                                                                                                                                                                                                                                                                                          |

### SliderRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => SliderApi\                      | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderRootContextProps

| Property | Default | Type                                     | Description |
| -------- | ------- | ---------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => SliderApi\]> | -           |

### SliderLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### SliderValueTextProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"output">]> \| undefined | Render the element yourself |

### SliderControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderTrackProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderRangeProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderThumbProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| index    | -       | number                                           | -                           |
| name?    | -       | string \| undefined                              | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### SliderMarkerGroupProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### SliderMarkerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | number                                           | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Switch

Toggle between two states, such as on/off.

```svelte



	
		
	
	Label
	


```

## Checked Color

Use the [Tailwind data attribute syntax](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) to target the active state using `data-[state=checked]`

```svelte



	
		
	
	


```

## List

```svelte



	{#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
		
			{label}
			
				
			
			
		
		{#if i < 2}
			
		{/if}
	{/each}


```

## Icons

```svelte



	
		
			
				{#snippet children(switch_)}
					{#if switch_().checked}
						
					{:else}
						
					{/if}
				{/snippet}
			
		
	
	


```

## Direction

```svelte



	
		
	
	Label
	


```

## API Reference

### SwitchRootProps

| Property         | Default | Type                                                                                                          | Description                                                                                                                    |
| ---------------- | ------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| ids?             | -       | Partial\<\{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> \| undefined | The ids of the elements in the switch. Useful for composition.                                                                 |
| label?           | -       | string \| undefined                                                                                           | Specifies the localized strings that identifies the accessibility elements and their states                                    |
| disabled?        | -       | boolean \| undefined                                                                                          | Whether the switch is disabled.                                                                                                |
| invalid?         | -       | boolean \| undefined                                                                                          | If \`true\`, the switch is marked as invalid.                                                                                  |
| required?        | -       | boolean \| undefined                                                                                          | If \`true\`, the switch input is marked as required,                                                                           |
| readOnly?        | -       | boolean \| undefined                                                                                          | Whether the switch is read-only                                                                                                |
| onCheckedChange? | -       | ((details: CheckedChangeDetails) => void) \| undefined                                                        | Function to call when the switch is clicked.                                                                                   |
| checked?         | -       | boolean \| undefined                                                                                          | The controlled checked state of the switch                                                                                     |
| defaultChecked?  | -       | boolean \| undefined                                                                                          | The initial checked state of the switch when rendered.
Use when you don't need to control the checked state of the switch. |
| name?            | -       | string \| undefined                                                                                           | The name of the input field in a switch
(Useful for form submission).                                                      |
| form?            | -       | string \| undefined                                                                                           | The id of the form that the switch belongs to                                                                                  |
| value?           | "on"    | string \| number \| undefined                                                                                 | The value of switch input. Useful for form submission.                                                                         |
| dir?             | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                   | The document's text/writing direction.                                                                                         |
| getRootNode?     | -       | (() => ShadowRoot \| Node \| Document) \| undefined                                                           | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                     |
| element?         | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined                                                            | Render the element yourself                                                                                                    |

### SwitchRootProviderProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| value    | -       | () => SwitchApi\                        | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### SwitchRootContextProps

| Property | Default | Type                                     | Description |
| -------- | ------- | ---------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => SwitchApi\]> | -           |

### SwitchControlProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### SwitchThumbProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### SwitchLabelProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### SwitchHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |


# Tabs

Use tabs to quickly switch between different views and pages.

```svelte



	
		Tab 1
		Tab 2
		Tab 3
		
	
	Content for Tab 1
	Content for Tab 2
	Content for Tab 3


```

## Fluid Width

```svelte



	
		Tab 1
		Tab 2
		Tab 3
		
	
	Content for Tab 1
	Content for Tab 2
	Content for Tab 3


```

## Vertical

```svelte



	
		Tab 1
		Tab 2
		Tab 3
		
	
	Content for Tab 1
	Content for Tab 2
	Content for Tab 3


```

## Direction

```svelte



	
		Tab 1
		Tab 2
		Tab 3
		
	
	Content for Tab 1
	Content for Tab 2
	Content for Tab 3


```

## API Reference

### TabsRootProps

| Property        | Default      | Type                                                                                                                                               | Description                                                                                                                                                                                                       |
| --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ids?            | -            | Partial\<\{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string; }> \| undefined | The ids of the elements in the tabs. Useful for composition.                                                                                                                                                      |
| translations?   | -            | IntlTranslations \| undefined                                                                                                                      | Specifies the localized strings that identifies the accessibility elements and their states                                                                                                                       |
| loopFocus?      | true         | boolean \| undefined                                                                                                                               | Whether the keyboard navigation will loop from last tab to first, and vice versa.                                                                                                                                 |
| value?          | -            | string \| null \| undefined                                                                                                                        | The controlled selected tab value                                                                                                                                                                                 |
| defaultValue?   | -            | string \| null \| undefined                                                                                                                        | The initial selected tab value when rendered.
Use when you don't need to control the selected tab value.                                                                                                      |
| orientation?    | "horizontal" | "horizontal" \| "vertical" \| undefined                                                                                                            | The orientation of the tabs. Can be \`horizontal\` or \`vertical\`
- \`horizontal\`: only left and right arrow key navigation will work.
- \`vertical\`: only up and down arrow key navigation will work. |
| activationMode? | "automatic"  | "manual" \| "automatic" \| undefined                                                                                                               | The activation mode of the tabs. Can be \`manual\` or \`automatic\`
- \`manual\`: Tabs are activated when clicked or press \`enter\` key.
- \`automatic\`: Tabs are activated when receiving focus        |
| onValueChange?  | -            | ((details: ValueChangeDetails) => void) \| undefined                                                                                               | Callback to be called when the selected/active tab changes                                                                                                                                                        |
| onFocusChange?  | -            | ((details: FocusChangeDetails) => void) \| undefined                                                                                               | Callback to be called when the focused tab changes                                                                                                                                                                |
| composite?      | -            | boolean \| undefined                                                                                                                               | Whether the tab is composite                                                                                                                                                                                      |
| deselectable?   | -            | boolean \| undefined                                                                                                                               | Whether the active tab can be deselected when clicking on it.                                                                                                                                                     |
| navigate?       | -            | ((details: NavigateDetails) => void) \| null \| undefined                                                                                          | Function to navigate to the selected tab when clicking on it.
Useful if tab triggers are anchor elements.                                                                                                     |
| dir?            | "ltr"        | "ltr" \| "rtl" \| undefined                                                                                                                        | The document's text/writing direction.                                                                                                                                                                            |
| getRootNode?    | -            | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                        |
| element?        | -            | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                   | Render the element yourself                                                                                                                                                                                       |

### TabsRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => TabsApi\                        | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TabsRootContextProps

| Property | Default | Type                                   | Description |
| -------- | ------- | -------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TabsApi\]> | -           |

### TabsListProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TabsTriggerProps

| Property  | Default | Type                                                | Description                 |
| --------- | ------- | --------------------------------------------------- | --------------------------- |
| value     | -       | string                                              | The value of the tab        |
| disabled? | -       | boolean \| undefined                                | Whether the tab is disabled |
| element?  | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### TabsIndicatorProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TabsContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | string                                           | The value of the tab        |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Tags Input

Allows input of multiple values.

```svelte



	Label
	
		
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					
						
							{value}
							
						
						
					
				{/each}
			{/snippet}
		
		
	
	Clear All
	


```

## Custom Icon

```svelte



	
		
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					
						
							{value}
							
								
							
						
						
					
				{/each}
			{/snippet}
		
		
	
	


```

## Color

```svelte



	
		
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					
						
							{value}
							
						
						
					
				{/each}
			{/snippet}
		
		
	
	


```

## Provider Pattern

Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the the inner component APIs.

```svelte



	
		
			
				{#snippet children(tagsInput)}
					{#each tagsInput().value as value, index (index)}
						
							
								{value}
								
							
							
						
					{/each}
				{/snippet}
			
			
		
		
	

	
	
		
	


```

## Direction

```svelte



	Label
	
		
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					
						
							{value}
							
						
						
					
				{/each}
			{/snippet}
		
		
	
	Clear All
	


```

## API Reference

### TagsInputRootProps

| Property              | Default  | Type                                                                                                                                                                                                                                                       | Description                                                                                                                                         |
| --------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| ids?                  | -        | Partial\<\{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined | The ids of the elements in the tags input. Useful for composition.                                                                                  |
| translations?         | -        | IntlTranslations \| undefined                                                                                                                                                                                                                              | Specifies the localized strings that identifies the accessibility elements and their states                                                         |
| maxLength?            | -        | number \| undefined                                                                                                                                                                                                                                        | The max length of the input.                                                                                                                        |
| delimiter?            | ","      | string \| RegExp \| undefined                                                                                                                                                                                                                              | The character that serves has:
- event key to trigger the addition of a new tag
- character used to split tags when pasting into the input  |
| autoFocus?            | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether the input should be auto-focused                                                                                                            |
| disabled?             | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether the tags input should be disabled                                                                                                           |
| readOnly?             | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether the tags input should be read-only                                                                                                          |
| invalid?              | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether the tags input is invalid                                                                                                                   |
| required?             | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether the tags input is required                                                                                                                  |
| editable?             | true     | boolean \| undefined                                                                                                                                                                                                                                       | Whether a tag can be edited after creation, by pressing \`Enter\` or double clicking.                                                               |
| inputValue?           | -        | string \| undefined                                                                                                                                                                                                                                        | The controlled tag input's value                                                                                                                    |
| defaultInputValue?    | -        | string \| undefined                                                                                                                                                                                                                                        | The initial tag input value when rendered.
Use when you don't need to control the tag input value.                                              |
| value?                | -        | string\[] \| undefined                                                                                                                                                                                                                                     | The controlled tag value                                                                                                                            |
| defaultValue?         | -        | string\[] \| undefined                                                                                                                                                                                                                                     | The initial tag value when rendered.
Use when you don't need to control the tag value.                                                          |
| onValueChange?        | -        | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                                       | Callback fired when the tag values is updated                                                                                                       |
| onInputValueChange?   | -        | ((details: InputValueChangeDetails) => void) \| undefined                                                                                                                                                                                                  | Callback fired when the input value is updated                                                                                                      |
| onHighlightChange?    | -        | ((details: HighlightChangeDetails) => void) \| undefined                                                                                                                                                                                                   | Callback fired when a tag is highlighted by pointer or keyboard navigation                                                                          |
| onValueInvalid?       | -        | ((details: ValidityChangeDetails) => void) \| undefined                                                                                                                                                                                                    | Callback fired when the max tag count is reached or the \`validateTag\` function returns \`false\`                                                  |
| validate?             | -        | ((details: ValidateArgs) => boolean) \| undefined                                                                                                                                                                                                          | Returns a boolean that determines whether a tag can be added.
Useful for preventing duplicates or invalid tag values.                           |
| blurBehavior?         | -        | "clear" \| "add" \| undefined                                                                                                                                                                                                                              | The behavior of the tags input when the input is blurred
- \`"add"\`: add the input value as a new tag
- \`"clear"\`: clear the input value |
| addOnPaste?           | false    | boolean \| undefined                                                                                                                                                                                                                                       | Whether to add a tag when you paste values into the tag input                                                                                       |
| max?                  | Infinity | number \| undefined                                                                                                                                                                                                                                        | The max number of tags                                                                                                                              |
| allowOverflow?        | -        | boolean \| undefined                                                                                                                                                                                                                                       | Whether to allow tags to exceed max. In this case,
we'll attach \`data-invalid\` to the root                                                    |
| name?                 | -        | string \| undefined                                                                                                                                                                                                                                        | The name attribute for the input. Useful for form submissions                                                                                       |
| form?                 | -        | string \| undefined                                                                                                                                                                                                                                        | The associate form of the underlying input element.                                                                                                 |
| dir?                  | "ltr"    | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                | The document's text/writing direction.                                                                                                              |
| getRootNode?          | -        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                        | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                          |
| onPointerDownOutside? | -        | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                                                                                                    | Function called when the pointer is pressed down outside the component                                                                              |
| onFocusOutside?       | -        | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                                                                                                          | Function called when the focus is moved outside the component                                                                                       |
| onInteractOutside?    | -        | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                                                                                                       | Function called when an interaction happens outside the component                                                                                   |
| element?              | -        | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                                           | Render the element yourself                                                                                                                         |

### TagsInputRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => TagsInputApi\                   | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TagsInputRootContextProps

| Property | Default | Type                                        | Description |
| -------- | ------- | ------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TagsInputApi\]> | -           |

### TagsInputLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### TagsInputControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TagsInputItemProps

| Property  | Default | Type                                              | Description                 |
| --------- | ------- | ------------------------------------------------- | --------------------------- |
| index     | -       | string \| number                                  | -                           |
| value     | -       | string                                            | -                           |
| disabled? | -       | boolean \| undefined                              | -                           |
| element?  | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### TagsInputItemPreviewProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TagsInputItemTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### TagsInputItemDeleteTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### TagsInputItemInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### TagsInputInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |

### TagsInputClearTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### TagsInputHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |


# Toast

Display brief messages to users.

```svelte





	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			
		
	{/snippet}


```

## Usage

This component acts as a Singleton - meaning you only implement a single instance (typically at the root scope of your app) and then reused it over and over. To do this, implement the `` at the root scope of your app (for SvelteKit this would be your root `+layout.svelte`), and use a shared `createToaster()` instance to trigger messages to that group from anywhere in your application.

## Type

```svelte



	
	
	
	



	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			
		
	{/snippet}


```

Types can be specified in one of two ways:

* Via a trigger method: `toaster.{info|success|warning|error}()`
* Via the object key: `type: {info|success|warning|error}`

## Action

Include an optional action button.

```svelte





	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			{#if toast.action}
				{toast.action.label}
			{/if}
			
		
	{/snippet}


```

## Closable

By passing `closable: false` you can disable the close button.

```svelte





	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			{#if toast.closable}
				
			{/if}
		
	{/snippet}


```

## Placement

```svelte





	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			
		
	{/snippet}


```

## Meta

Use the `meta` key to provide arbitrary data. Then use this to modify your Toast template.

```svelte


{#snippet skull()}
	
{/snippet}




	{#snippet children(toast)}
		
			{@render toast.meta!.icon()}
			
				{toast.title}
				{toast.description} {toast.meta?.foo}
			
			
		
	{/snippet}


```

## Promise

Use promises for asynchronous triggers.

```svelte





	{#snippet children(toast)}
		
			
				{toast.title}
				{toast.description}
			
			
		
	{/snippet}


```

## API Reference

### ToastRootProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| toast    | -       | Options\                                    | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ToastRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => ToastApi\]> | -           |

### ToastGroupProps

| Property  | Default | Type                                             | Description                 |
| --------- | ------- | ------------------------------------------------ | --------------------------- |
| toaster   | -       | ToastStore\                                 | -                           |
| children? | -       | Snippet\<\[ToastProps\]> \| undefined       | -                           |
| element?  | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ToastMessageProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ToastTitleProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ToastDescriptionProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### ToastActionTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### ToastCloseTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |


# Tooltip

A floating label that appears on hover or focus, providing additional context.

```svelte



	Hover Me
	
		
			
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
			
		
	


```

## Arrow

You may optionally enable arrows via the `Arrow` and `ArrowTip` component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a `style` attribute.

```svelte



	Hover Me
	
		
			
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
				
					
				
			
		
	


```

## Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part.

```svelte



	
		Default (auto)
		
			
				This example will be below the sibling.
			
		
	

	
		Above (20)
		
			
				This example will be above the sibling.
			
		
	

	
		Sibling (10)
	


```

## Programmatic Control

This is made possible via the Provider Pattern.

```svelte



	
	
		Anchor ({tooltip().open ? 'open' : 'closed'})
		
			
				
					Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
					nesciunt enim.
				
			
		
	


```

## Direction

```svelte



	Hover Me
	
		
			
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
			
		
	


```

## Headless

Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling.

```svelte



	Hover Me
	
		
			
				
				Three spooky skeletons!
			
		
	


```

The benefits are as follows:

* You can make the `Trigger` surround any element, including an icon, button, image, etc.
* You can modify the entire structure within `Content`, including custom markup and styling.
* You may place the `CloseTrigger` anywhere, and use it as an X close option.

## API Reference

### TooltipRootProps

| Property            | Default | Type                                                                                             | Description                                                                                                                     |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| dir?                | "ltr"   | "ltr" \| "rtl" \| undefined                                                                      | The document's text/writing direction.                                                                                          |
| aria-label?         | -       | string \| undefined                                                                              | Custom label for the tooltip.                                                                                                   |
| ids?                | -       | Partial\<\{ trigger: string; content: string; arrow: string; positioner: string; }> \| undefined | The ids of the elements in the tooltip. Useful for composition.                                                                 |
| openDelay?          | 400     | number \| undefined                                                                              | The open delay of the tooltip.                                                                                                  |
| closeDelay?         | 150     | number \| undefined                                                                              | The close delay of the tooltip.                                                                                                 |
| closeOnPointerDown? | true    | boolean \| undefined                                                                             | Whether to close the tooltip on pointerdown.                                                                                    |
| closeOnEscape?      | true    | boolean \| undefined                                                                             | Whether to close the tooltip when the Escape key is pressed.                                                                    |
| closeOnScroll?      | true    | boolean \| undefined                                                                             | Whether the tooltip should close on scroll                                                                                      |
| closeOnClick?       | true    | boolean \| undefined                                                                             | Whether the tooltip should close on click                                                                                       |
| interactive?        | false   | boolean \| undefined                                                                             | Whether the tooltip's content is interactive.
In this mode, the tooltip will remain open when user hovers over the content. |
| onOpenChange?       | -       | ((details: OpenChangeDetails) => void) \| undefined                                              | Function called when the tooltip is opened.                                                                                     |
| positioning?        | -       | PositioningOptions \| undefined                                                                  | The user provided options used to position the popover content                                                                  |
| disabled?           | -       | boolean \| undefined                                                                             | Whether the tooltip is disabled                                                                                                 |
| open?               | -       | boolean \| undefined                                                                             | The controlled open state of the tooltip                                                                                        |
| defaultOpen?        | -       | boolean \| undefined                                                                             | The initial open state of the tooltip when rendered.
Use when you don't need to control the open state of the tooltip.      |
| getRootNode?        | -       | (() => Node \| ShadowRoot \| Document) \| undefined                                              | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                      |
| children?           | -       | Snippet\<\[]> \| undefined                                                                       | The default slot content to be rendered within the component.                                                                   |

### TooltipRootProviderProps

| Property  | Default | Type                         | Description                                                   |
| --------- | ------- | ---------------------------- | ------------------------------------------------------------- |
| value     | -       | () => TooltipApi\ | -                                                             |
| children? | -       | Snippet\<\[]> \| undefined   | The default slot content to be rendered within the component. |

### TooltipRootContextProps

| Property | Default | Type                                      | Description |
| -------- | ------- | ----------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TooltipApi\]> | -           |

### TooltipTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### TooltipPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipArrowProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipArrowTipProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Tree View

Used to display hierarchical data.

```svelte



	File System
	
		{#each collection.rootNode.children || [] as node, index (node)}
			{@render treeNode(node, [index])}
		{/each}
	


{#snippet treeNode(node: Node, indexPath: number[])}
	
		{#if node.children}
			
				
					
					
						
						{node.name}
					
				
				
					
					{#each node.children as childNode, childIndex (childNode)}
						{@render treeNode(childNode, [...indexPath, childIndex])}
					{/each}
				
			
		{:else}
			
				
				{node.name}
			
		{/if}
	
{/snippet}

```

## Multiple Selection

* Windows: Hold Ctrl + left click with mouse.
* MacOS: Hold ⌘ + left click with mouse.

```svelte



	File System
	
		{#each collection.rootNode.children || [] as node, index (node)}
			{@render treeNode(node, [index])}
		{/each}
	


{#snippet treeNode(node: Node, indexPath: number[])}
	
		{#if node.children}
			
				
					
					
						
						{node.name}
					
				
				
					
					{#each node.children as childNode, childIndex (childNode)}
						{@render treeNode(childNode, [...indexPath, childIndex])}
					{/each}
				
			
		{:else}
			
				
				{node.name}
			
		{/if}
	
{/snippet}

```

## Collapse and Expand

Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the `collapse` and `expand` methods on the `TreeView` instance.

```svelte



	
		File System
		
			{#each collection.rootNode.children || [] as node, index (node)}
				{@render treeNode(node, [index])}
			{/each}
		
	

	
		
		
	


{#snippet treeNode(node: Node, indexPath: number[])}
	
		{#if node.children}
			
				
					
					
						
						{node.name}
					
				
				
					
					{#each node.children as childNode, childIndex (childNode)}
						{@render treeNode(childNode, [...indexPath, childIndex])}
					{/each}
				
			
		{:else}
			
				
				{node.name}
			
		{/if}
	
{/snippet}

```

## Lazy Loading

```svelte



	File System
	
		{#each collection.rootNode.children || [] as node, index (node)}
			{@render treeNode(node, [index])}
		{/each}
	


{#snippet treeNode(node: Node, indexPath: number[])}
	
		{#if node.children || node.childrenCount}
			
				
					
					
						
					
					
						
						{node.name}
					
				
				
					
					{#each node.children ?? [] as childNode, childIndex (childNode)}
						{@render treeNode(childNode, [...indexPath, childIndex])}
					{/each}
				
			
		{:else}
			
				
				{node.name}
			
		{/if}
	
{/snippet}

```

## API Reference

### TreeViewRootProps

| Property                | Default  | Type                                                                                                    | Description                                                                                                                                 |
| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| collection?             | -        | TreeCollection\ \| undefined                                                                       | The tree collection data                                                                                                                    |
| ids?                    | -        | Partial\<\{ root: string; tree: string; label: string; node: (value: string) => string; }> \| undefined | The ids of the tree elements. Useful for composition.                                                                                       |
| expandedValue?          | -        | string\[] \| undefined                                                                                  | The controlled expanded node ids                                                                                                            |
| defaultExpandedValue?   | -        | string\[] \| undefined                                                                                  | The initial expanded node ids when rendered.
Use when you don't need to control the expanded node value.                                |
| selectedValue?          | -        | string\[] \| undefined                                                                                  | The controlled selected node value                                                                                                          |
| defaultSelectedValue?   | -        | string\[] \| undefined                                                                                  | The initial selected node value when rendered.
Use when you don't need to control the selected node value.                              |
| defaultCheckedValue?    | -        | string\[] \| undefined                                                                                  | The initial checked node value when rendered.
Use when you don't need to control the checked node value.                                |
| checkedValue?           | -        | string\[] \| undefined                                                                                  | The controlled checked node value                                                                                                           |
| defaultFocusedValue?    | -        | string \| null \| undefined                                                                             | The initial focused node value when rendered.
Use when you don't need to control the focused node value.                                |
| focusedValue?           | -        | string \| null \| undefined                                                                             | The value of the focused node                                                                                                               |
| selectionMode?          | "single" | "single" \| "multiple" \| undefined                                                                     | Whether the tree supports multiple selection
- "single": only one node can be selected
- "multiple": multiple nodes can be selected |
| onExpandedChange?       | -        | ((details: ExpandedChangeDetails\) => void) \| undefined                                           | Called when the tree is opened or closed                                                                                                    |
| onSelectionChange?      | -        | ((details: SelectionChangeDetails\) => void) \| undefined                                          | Called when the selection changes                                                                                                           |
| onFocusChange?          | -        | ((details: FocusChangeDetails\) => void) \| undefined                                              | Called when the focused node changes                                                                                                        |
| onCheckedChange?        | -        | ((details: CheckedChangeDetails) => void) \| undefined                                                  | Called when the checked value changes                                                                                                       |
| canRename?              | -        | ((node: any, indexPath: IndexPath) => boolean) \| undefined                                             | Function to determine if a node can be renamed                                                                                              |
| onRenameStart?          | -        | ((details: RenameStartDetails\) => void) \| undefined                                              | Called when a node starts being renamed                                                                                                     |
| onBeforeRename?         | -        | ((details: RenameCompleteDetails) => boolean) \| undefined                                              | Called before a rename is completed. Return false to prevent the rename.                                                                    |
| onRenameComplete?       | -        | ((details: RenameCompleteDetails) => void) \| undefined                                                 | Called when a node label rename is completed                                                                                                |
| onLoadChildrenComplete? | -        | ((details: LoadChildrenCompleteDetails\) => void) \| undefined                                     | Called when a node finishes loading children                                                                                                |
| onLoadChildrenError?    | -        | ((details: LoadChildrenErrorDetails\) => void) \| undefined                                        | Called when loading children fails for one or more nodes                                                                                    |
| expandOnClick?          | true     | boolean \| undefined                                                                                    | Whether clicking on a branch should open it or not                                                                                          |
| typeahead?              | true     | boolean \| undefined                                                                                    | Whether the tree supports typeahead search                                                                                                  |
| loadChildren?           | -        | ((details: LoadChildrenDetails\) => Promise\) \| undefined                                 | Function to load children for a node asynchronously.
When provided, branches will wait for this promise to resolve before expanding.    |
| dir?                    | "ltr"    | "ltr" \| "rtl" \| undefined                                                                             | The document's text/writing direction.                                                                                                      |
| getRootNode?            | -        | (() => ShadowRoot \| Node \| Document) \| undefined                                                     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                  |
| element?                | -        | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                        | Render the element yourself                                                                                                                 |

### TreeViewRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => TreeViewApi\               | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewRootContextProps

| Property | Default | Type                                            | Description |
| -------- | ------- | ----------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TreeViewApi\]> | -           |

### TreeViewTreeProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewLabelProps

| Property | Default | Type                                            | Description                 |
| -------- | ------- | ----------------------------------------------- | --------------------------- |
| level?   | -       | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined         | The level of the heading.   |
| element? | -       | Snippet\<\[HTMLAttributes\<"h3">]> \| undefined | Render the element yourself |

### TreeViewNodeProviderProps

| Property  | Default | Type                       | Description                                                   |
| --------- | ------- | -------------------------- | ------------------------------------------------------------- |
| value     | -       | NodeProps                  | -                                                             |
| children? | -       | Snippet\<\[]> \| undefined | The default slot content to be rendered within the component. |

### TreeViewBranchProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewBranchControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewBranchTextProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### TreeViewBranchIndicatorProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |

### TreeViewBranchContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewBranchIndentGuideProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TreeViewItemProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |


# Bits UI

Flexible, unstyled, and accessible primitives that provide the foundation for building your own high-quality Svelte component library.

{

  
    Bits UI is a collection of headless component primitives for Svelte that prioritizes developer experience, accessibility, and flexibility.
    The goal is to empower developers to build high-quality, accessible user interfaces without sacrificing creative control or performance.
  

}

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Getting Started](https://www.bits-ui.com/docs/getting-started)
* [Styling](https://www.bits-ui.com/docs/styling)

## Requirements

\| Tooling                              | Minimum Supported |
\| ------------------------------------ | ----------------- |
\| [Svelte](https://svelte.dev/)        | 5                 |
\| [Skeleton](https://skeleton.dev)     | 3                 |
\| [Tailwind](https://tailwindcss.com/) | 4                 |
\| [Bits UI](https://www.bits-ui.com/)  | 1                 |

## Introduction

In this guide we'll implement the following Bits UI `` component. This will showcase the bare minimum requirements for integrating Skeleton with Bits UI.

## Get Started

## Styling

Each Bits UI component accepts a `class` attribute. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the `` parent component.

```svelte

	

```

Styling the `` sub-component. You can clone these to `` too.

```svelte

	←

```

Styling the `` sub-component.

```svelte

	
	{date.day}

```

For the sake of time we won't cover every sub-component.

### Complete Example

Below is a complete example showing the entire component with all styles and basic configuration.

```svelte



	{#snippet children({ months, weekdays })}
		
			
				←
			
			
			
				→
			
		
		
			{#each months as month, i (i)}
				
					
						
							{#each weekdays as day}
								
									{day.slice(0, 2)}
								
							{/each}
						
					
					
						{#each month.weeks as weekDates}
							
								{#each weekDates as date}
									
										
											
											{date.day}
										
									
								{/each}
							
						{/each}
					
				
			{/each}
		
	{/snippet}

```

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/resources/contribute/components).

## Attribution

Bits UI is created and maintained by [Huntabyte](https://github.com/huntabyte). Consider [sponsoring him](https://github.com/sponsors/huntabyte) to support this open source project.


# Melt UI

An open-source Svelte library for building high-quality, accessible design systems and web apps.

{

  
    Melt UI empowers developers to create accessible UIs that embody their unique style. With a strong focus on accessibility, limitless
    customization options, and an overall delightful developer experience, Melt UI strives to be the de-facto headless UI library for Svelte.
  

}

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Styling](https://next.melt-ui.com/guides/styling)
* [How to Use](https://next.melt-ui.com/guides/how-to-use)

## Requirements

\| Tooling                              | Minimum Supported  |
\| ------------------------------------ | ------------------ |
\| [Svelte](https://svelte.dev/)        | 5                  |
\| [Skeleton](https://skeleton.dev)     | 3                  |
\| [Tailwind](https://tailwindcss.com/) | 4                  |
\| [Melt UI](https://next.melt-ui.com/) | (Svelte 5 version) |

## Introduction

In this guide we'll implement the following Melt UI `` component. This will showcase the bare minimum requirements for integrating Skeleton with Melt UI.

## Get Started

## Styling

Melt UI builders are made up of native HTML elements, meaning you can implement classes directly. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the root element.

```svelte

	

```

Styling the trigger button element.

```svelte

```

Styling content element, including animations based on the `data-state` value.

```svelte

	

```

Before the close of the `#each` block, insert the follow to insert a `` divider.

```svelte
{#if index < items.length - 1}{/if}
```

### Complete Example

Below is a complete example showing the entire component with styles, transitions, and some basic configuration.

```svelte



	{#each items as i, index}
		{@const item = accordion.getItem(i)}
		
			
		
		{#if item.isExpanded}
			
				{item.item.description}
			
		{/if}
		{#if index < items.length - 1}{/if}
	{/each}

```

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/resources/contribute/components).

## Attribution

Melt UI is created and maintained by [TGlide](https://github.com/TGlide). Consider [sponsoring him](https://github.com/sponsors/TGlide) to support this open source project.


# Radix UI

Unstyled, accessible, open source React primitives for high-quality web apps and design systems.

{

  
    Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use
    these components either as the base layer of your design system, or adopt them incrementally.
  

}

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Introduction](https://www.radix-ui.com/primitives/docs/overview/introduction)
* [Getting Started](https://www.radix-ui.com/primitives/docs/overview/getting-started)
* [Styling](https://www.radix-ui.com/primitives/docs/guides/styling)

## Requirements

\| Tooling                               | Minimum Supported |
\| ------------------------------------- | ----------------- |
\| [React](https://react.dev/)           | 18                |
\| [Skeleton](https://skeleton.dev)      | 3                 |
\| [Radix UI](https://www.radix-ui.com/) | 1                 |
\| [Tailwind](https://tailwindcss.com/)  | 4                 |

## Introduction

In this guide we'll implement the following Radix UI `` component. This will showcase the bare minimum requirements for integrating Skeleton with Radix UI.

## Get Started

## Styling

Each Radix UI component accepts a `className` prop. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the `` component.

```tsx

	{/* ... */}

```

Styling each item component. Apply these styles to each button.

```tsx

	{/* ... */}

```

### Complete Example

Below is a complete example showing the entire component with all styles and basic configuration.

```tsx
import * as RadixToggleGroup from '@radix-ui/react-toggle-group';
import { useState, type FC } from 'react';

interface ToggleGroupProps {
	/* ... */
}

export const ToggleGroup: FC = () => {
	const [value, setValue] = useState('left');

	return (
		 {
				if (value) setValue(value);
			}}
			aria-label="Text alignment"
		>
			
				Left
			
			
				Center
			
			
				Right
			
		
	);
};
```

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/resources/contribute/components).

## Attribution

Radix UI is created and maintained by [WorkOS](https://workos.com/).


# Code Block

Learn how to integrate Shiki, a beautiful yet powerful syntax highlighter.

{/* --- */}

## Installation

[Install Shiki](https://shiki.style/guide/install) with your preferred package manager.

```console
npm install -D shiki
```

## Create a Component

A reusable component should suffice in most projects. Tap the `code` tab below to access the source, then follow the steps below.

1. Implement a new `` component in `/src/lib/components/code-block.svelte`.
2. Implement several variations of our `` component in any SvelteKit route `+page.svelte`.

A few things of note about this component:

* You will need to import and configure any number of [Shiki themes](https://shiki.style/themes).
* You will need to import and configure any number of [supported languages](https://shiki.style/languages).
* The component has been implemented using Skeleton's [component style guidelines](http://localhost:4321/docs/resources/contribute/components).
* This provides a number of style props for easy customization via Skeleton's standard conventions.
* The component exposes `code`, `lang`, and `theme` properties to configure on-the-fly.
* The Code Block `` tag is auto-generated by Shiki; target utility classes with: `[&>pre]:myClassHere`.

## Programmatic Usage

In some cases you may not have direct access to the source code, such as content from a blog posts or CMS pages. In fact the code may even come pre-baked with surrounding `` or `` elements. For this, you'll need to follow the general steps below. Specific implementation may differ based on your app and meta-framework.

1. Query all `` or `` blocks using Javascript tools like `document.querySelectorAll()`. Be as specific as possible.
2. Ensure you have a clean instance of the source code itself, with no extra markup injected within.
3. Use Shiki's [codeToHtml](https://shiki.style/guide/install#shorthands) feature to parse the code as styled HTML markup.
4. Then append each instance of the code blocks in your DOM.

For more instructions, please refer to this guide by [Joy of Code](https://joyofcode.xyz/) explaining how to [implement Shiki via MDX](https://joyofcode.xyz/sveltekit-markdown-blog#using-components-inside-markdown).

## Custom Themes

Shiki provides support for generating a custom highlighter theme:

* [Loading Custom Themes](https://shiki.style/guide/load-theme)
* [List of Bundled Themes](https://shiki.style/themes)

Shiki theme values can be defined using Skeleton custom theme properties, such as `rgba(--color-primary-500)`.

## Accessibility

See [Salma Alam-Naylor's](https://whitep4nth3r.com/about/) guidelines for [creating accessible code blocks](https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/) that meet WGAC standards.


# Iconography

Learn how to integrate Lucide for iconography in Skeleton.

## Lucide

If you're looking for an opinionated solution, Skeleton recommends [Lucide](https://lucide.dev/). This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.

### Installation

Follow the official instructions to install [Lucide for Svelte](https://lucide.dev/guide/packages/lucide-svelte).

## Usage

For optimal performance we recommend importing each icon using the full path.

```svelte



```

## Alternatives

* [Iconify](https://iconify.design/) - provides a vast array of icon sets supported by popular icon libraries.
* [Font Awesome](https://fontawesome.com/) - provides a huge variety of icons in their free tier.
* [SimpleIcons](https://simpleicons.org/) - provides an excellent selection of brand icons.


# Contribute

Learn how to contribute to Skeleton.

{/* --- */}


# LLMs

Documentation for LLMs. Beep Boop.

{/* --- */}

The Skeleton `LLMs.txt` files provide concise, up-to-date documentation optimized for large language models. The have been implemented to follow the **LLM.txt Standard**.

## Paths

\| Path                                 | Description                 |
\| ------------------------------------ | --------------------------- |
\| [/llms.txt](/llms.txt)               | List of LLMs txt directory. |
\| [/llms-react.txt](/llms-react.txt)   | React guidelines.           |
\| [/llms-svelte.txt](/llms-svelte.txt) | Svelte guidelines.          |


# Get Started

Read this before you submit your first contribution.

## How to Contribute

Take care to read all contributions guidelines before you begin!

1. Learn how to [contribute to open source](https://opensource.guide/how-to-contribute/).
2. Follow a [step-by-step guide](https://github.com/firstcontributions/first-contributions) to practice your first contribution.
3. Locate an [open issue on GitHub](https://github.com/skeletonlabs/skeleton/issues). Post a comment letting us know you wish to volunteer.
4. Optionally, you may coordinate efforts on the `#contributors` channel within [Discord](https://discord.gg/EXqV7W8MtY).
5. A member of the Skeleton team will assign the issue to you and help outline requirements.
6. Complete the work and submit a pull request per the requirements on this page.

> NOTE: non-trivial PRs submitted without our prior consent will be denied. Repeat offenders will be blocked.

## Using PNPM

Skeleton makes use of [PNPM](https://pnpm.io/) and [PNPM workspaces](https://pnpm.io/workspaces) to maintain all projects within the Skeleton monorepo.

1. [Install PNPM](https://pnpm.io/installation) on your local computer.
2. [Fork the Skeleton monorepo](https://github.com/skeletonlabs/skeleton) via the option on GitHub.
3. Use Git to clone the forked project to your local machine.
4. Run `pnpm i` from the root to install the required dependencies.
5. Point your terminal at one of the `/sites`, `/packages` or `/playgrounds` projects detailed below.
6. Run `pnpm dev` to start a local dev server for each project.

> NOTE: Make sure you're running PNPM version `9.5.0` or higher to ensure support for [PNPM catalogs](https://pnpm.io/catalogs). You can check your version with `pnpm --version`.

### Adding Dependencies

As a courtesy, please consult with Skeleton maintainers before adding dependencies. Third-party dependencies come with some level of risk, and we may be able to offer alternatives that limit the scope of changes.

Dependencies may be installed using the standard `pnpm i` command. However, in some cases it may be beneficial to maintain a uniform version shared across multiple projects or within each `package.json`. For this we can make use of [PNPM Catalogs](https://pnpm.io/catalogs).

The main version is maintained in the monorepo root in `pnpm-workspace.yaml`:

```yaml
catalog:
	# ...
	: 
```

Use the following convention to link each project's dependency to the shared Catalog version:

```shell
pnpm add @catalog:
```

## Monorepo Structure

### Sites

Public facing websites that are deployed and hosted for users to browse.

\| Path                         | Description                           |
\| ---------------------------- | ------------------------------------- |
\| `/sites/skeleton.dev`        | The production documentation website. |
\| `/sites/themes.skeleton.dev` | The Skeleton themes generator website |

### Packages

Modular Skeleton packages distributed via NPM.

\| Path                        | Description                                                                |
\| --------------------------- | -------------------------------------------------------------------------- |
\| `/packages/skeleton`        | The Skeleton core package, contains Skeleton's Tailwind-specific features. |
\| `/packages/skeleton-react`  | The Skeleton React package, contains Skeleton React components.            |
\| `/packages/skeleton-svelte` | The Skeleton Svelte package, contains Skeleton Svelte components.          |
\| `/packages/skeleton-common` | The Skeleton common package, contains shared internal only utilities.      |
\| `/packages/cli`             | The Skeleton CLI, contains Skeleton's migrations.                          |

## Playgrounds

Isolated sandbox environments for developing, testing and experimenting.

\| Path                           | Description                                           |
\| ------------------------------ | ----------------------------------------------------- |
\| `/playgrounds/skeleton-svelte` | A SvelteKit playground for testing the Svelte package |
\| `/playgrounds/skeleton-react`  | A NextJS playground for testing the React package     |

## Branch

Create and target all pull requests against the `main` branch unless otherwise instructed.

\| Branch | Description                                        | Pull Requests                                      |
\| ------ | -------------------------------------------------- | -------------------------------------------------- |
\| `main` | Represents the release branch of the all projects. |  Allowed |

### PR Branch Conventions

Please use the following naming convention when creating your pull request.

\| Branch      | Role                                  |
\| ----------- | ------------------------------------- |
\| `docs/*`    | When updating the documentation site. |
\| `feature/*` | When implementing a new feature.      |
\| `task/*`    | When implementing a small task.       |
\| `bugfix/*`  | When implementing a fix for a bug.    |

Keep branch names short and semantic, and use snake-case to separate words.

```
docs/get-started-typo-fix
bugfix/accordion-render-issue
```

## Documentation Schema

Before your first run of the `/sites/skeleton.dev` documentation project, make sure to run `pnpm generate:types` at least one time. This will generate the assets required to populate API Reference tables on each component's documentation page.

## Changesets

[Changesets](https://github.com/changesets/changesets) are used to automatically generate the changelog for each release.

* Any contributions made within `/packages` *must* contain a Changeset
* Any contributions made within `/sites` should not include a Changeset.

Follow these instructions to generate a changeset:

1. Make sure you're within your local pull request feature branch.
2. Navigate to the root of the Skeleton monorepo.
3. Run `pnpm changeset` to trigger the Changeset CLI.
4. Follow the instructions when prompted.
5. Changeset are added as `.md` files within the `.changeset/` directory.
6. You may edit or revise a Changeset before your PR is merged.

Changesets use semantic versioning. We recommend the following convention.

\| Version | Role                                        |
\| ------- | ------------------------------------------- |
\| `major` | Do not use. Reserved for maintainers only.  |
\| `minor` | For notable changes, such as a new feature. |
\| `patch` | For small changes, such as a fixing a bug.  |

Changeset descriptions will appear verbatim on the [Changelog](https://github.com/skeletonlabs/skeleton/blob/dev/packages/skeleton/CHANGELOG.md). Keep it short, semantic, and and include the same [branch prefix](/docs/resources/contribute/get-started#pr-branch-conventions).

```mdx
---
'@skeletonlabs/skeleton-svelte': minor
---

feature: Added a new Avatar component.
```

## Tooling

Skeleton makes use of the following technology to improve the developer experience. It's recommended you run these tools before flagging the PR as "ready for review" on GitHub.

### Root Commands

Run the following commands in the monorepo root. Each will run recursively for supported packages.

* `pnpm format` - Formats the monorepo using [Prettier](https://prettier.io/).
* `pnpm lint` - Finds (and attempts to fix) any issues within the monorepo using [ESLint](https://eslint.org/).
* `pnpm test` - Runs all unit tests using [Vitest](https://vitest.dev/).
* `pnpm check` - Runs framework specific diagnostics, such as [Svelte Check](https://svelte.dev/docs/cli/sv-check), [Astro Check](https://docs.astro.build/en/reference/cli-reference/#astro-check), etc.

### Local Commands

Additionally, you may also run the local instance of each command. Consult the local `package.json` for available options. For `format` and `lint` commands, use the following syntax to draw from the root `package.json`:

```shell
pnpm -w 
```

### VS Code Extensions

We recommend the use of [VSCode](https://code.visualstudio.com/) for contributions, and the following VSCode extensions.

* [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
* [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
* [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
* [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)


# Components

Guidelines for contributing new Skeleton components.

### Dev Server

To run all packages/playgrounds/sites in watch mode, use the following command in the monorepo root:

```shell
pnpm dev
```

We've also provide a number of sub-commands for a more limited set of packages:

```shell
pnpm dev:{command}
```

* `dev:docs` - runs all dependencies for the Documentation website.
* `dev:themes` - runs all dependencies for the Theme Generator website.
* `dev:svelte` - runs all dependencies for the Svelte Playground.
* `dev:react` - runs all dependencies for the React Playground.

### Server Ports

The following represents the *default* localhost address and port for each project. This will be displayed in the terminal when starting each dev server.

* Documentation Site: `http://localhost:4321/`
* Svelte Playground: `http://localhost:5173/`
* React Playground: `http://localhost:3000/`

You may run the sites and playgrounds in parallel at the same time. If a server shares a port, this will increment by one for the next server (ex: `5174`, `5175`, etc). Keep your eye on the terminal to retrieve the specific local address for each.

### Zag.js

Skeleton components are built using a foundation of [Zag.js](https://zagjs.com/). This provides a suite of headless component primitives that handle logic and state, while providing a universal set of features per all supported frameworks. The Skeleton design system is then implemented as a layer on top of this.

When introducing a new Skeleton component, please refer to the documentation for each respective framework. For example:

* Avatar (React): https\://zagjs.com/components/react/avatar
* Avatar (Svelte): https\://zagjs.com/components/svelte/avatar

Continue reading below to learn how implement the Zag primitives as components using Skeleton-specific conventions.

***

## Adding Components

### Anatomy

When creating a component, start by breaking it down into its core parts. If the component utilizes a [Zag primitive](https://zagjs.com/components/svelte/avatar), you may copy the source [directly from Zag's Usage section](https://zagjs.com/components/svelte/avatar#usage). For custom in-house components, you may use Skeleton's common terminology and discuss the potential anatomy with Skeleton maintainers.

For example, the Zag Avatar component utilizes the following DOM structure:

```html

	
	...

```

As such, we'll implement one component part respective of each element:

* `` - the root element
* `` - the child image
* `` - the fallback span

We'll also include two special Skeleton-specific components:

* `` - Similar to `` but allows the user to pass in the api.
* `` - Provides access to the component tree's Context API.

### Directory and File Names

Components are housed in the following location per framework:

\| Framework | Directory                                   |
\| --------- | ------------------------------------------- |
\| React     | `/packages/skeletlon-react/src/components`  |
\| Svelte    | `/packages/skeletlon-svelte/src/components` |

Skeleton uses a consistent naming convention per component:

```
avatar/
├── anatomy/
│   ├── fallback.{tsx|svelte}
│   ├── image.{tsx|svelte}
│   ├── root-context.{tsx|svelte}
│   ├── root-provider.{tsx|svelte}
│   └── root.{tsx|svelte}
├── modules/
│   ├── anatomy.ts
│   ├── provider(.svelte).ts
│   └── root-context.ts
└── index.ts
```

### Anatomy Folder

The anatomy folder contains each component part inside a seperate file.

### Component Part File

Every component part should export their component as a default export and their prop types as named exports.

**React**

```tsx title="avatar-root.tsx"
export interface AvatarRootProps {
	// ...
}

export default function Root(props: AvatarRootProps) {
	// ...
}
```

**Svelte**

```svelte title="avatar-root.svelte"





```

Note that you may need to extend or omit portions of the type to avoid conflicts between Zag and HTML attributes.

#### Extend

* `PropsWithElement` - via Skeleton's `@/internal/props-with-element`; allows for HTML template overrides.
* `HTMLAttributes` - via Skeleton's `@/internal/html-attributes`; allows for standard HTML attributes.

#### Omit

* `Omit` - omit the `id` field from the `Props` interface as they will be provided inside the component itself.

### Modules Folder

#### Anatomy File

The `anatomy.ts` file contains the exported anatomy, which enables the friendly dot notation syntax when consumed.

```ts title="avatar-anatomy.ts"
import Fallback from '../anatomy/fallback';
import Image from '../anatomy/image';
import Root from '../anatomy/root';

export const Avatar = Object.assign(
	Root, // 
	{
		Image: Image, // 
		Fallback: Fallback, // 
	},
);
```

#### Context Files

The `{part}-context.ts` file contains the exported context for each component part's [context](/docs/resources/contribute/components#context-api). This pattern enables strong typing of the context itself.

For most components this will only be necessary for the root component, some components however may require context for their children well. Reference existing components for real world examples.

```ts title="avatar-root-context.ts"
import type { useAvatar } from './use-avatar';
import { createContext } from '@/internal/create-context';

export const AvatarRootContext = createContext>();
```

#### Index File

The index prepares all required component files for export.

```ts
export { Avatar } from './modules/anatomy';
export { useAvatar } from './modules/provider';
export type { AvatarRootProps } from './anatomy/root';
export type { AvatarRootProviderProps } from './anatomy/root-provider';
export type { AvatarRootContextProps } from './anatomy/root-context';
export type { AvatarImageProps } from './anatomy/image';
export type { AvatarFallbackProps } from './anatomy/fallback';
```

### Component Exports

Finally, make sure to export the new component for each respective component's framework package. This is handled in `/packages/skeleton-{framework}/src/index.ts`.

```ts
export * from './components/accordion/index';
export * from './components/avatar/index';
// ...
```

***

## Using Zag Primitives

### Source Code

Locate the respective framework component source code on the Zag website. For example:

\| Framework | Directory                                                       |
\| --------- | --------------------------------------------------------------- |
\| React     | [Avatar Docs](https://zagjs.com/components/react/avatar#usage)  |
\| Svelte    | [Avatar Docs](https://zagjs.com/components/svelte/avatar#usage) |

In most cases, Zag provides all source code in a single file. Take care when splitting this into multiple component parts. We recommend starting with the root component - including the primitive imports, and defining the `machine` and `api`. Then utilize Context API and child components for each additional sub-component.

### Context API

In some cases you may need to pass data from parent down to child components. For this, we can utilize each framework's Context API:

\| Framework | Documentation                                                                                               |
\| --------- | ----------------------------------------------------------------------------------------------------------- |
\| React     | [View Component API docs](https://react.dev/learn/passing-data-deeply-with-context)                         |
\| Svelte    | [View Component API docs](https://svelte.dev/docs/kit/state-management#Using-state-and-stores-with-context) |

Note that Skeleton implements a [set convention for Context API](/docs/resources/contribute/components#context-files) to enable strong typing.

### Common Conventions

While each component will present a unique set of challenges, we recommend you reference other existing components to see how we've handled specific situations. But there are a few common conventions we'll detail below.

* Try to stick as close to the Zag implementation DOM structure and naming as possible; don't get creative.
* Use whitespace to seperate Zag versus Skeleton logic, including: props, attributes, and context definitions.
* Avoid hardcoded english text or icons. Consider pass-throughs using props, snippets, or sub-components.
* Default to the named import pattern, such as `import { foo, bar, fizz } from 'whatever';` (Including Zag's imports)

#### React Specific

* Pass the `id` field into the `useMachine` hook using the `useId()` hook from `react`.
* Consume context using `use(Context)` from `react`.
* Use the `className` attribute to pass Skeleton classes.

#### Svelte Specific

* Pass the `id` field into the `useMachine` function using the `props.id()` rune from `svelte`.
* Consume context using the `Context.consume()`.
* Use the `class` attribute to pass Skeleton classes.

> NOTE: We welcome contributions to expand this section!

***

## Styling Components

Component classes are now common and shared between all framework iterations. These reside in `/packages/skeleton-common` and are named to match their respective component.

```
packages/
└── skeleton-common/
	└── src/
		├── classes/
		|	├── accordion.ts
		|	├── avatar.ts
		|	└── ...
		└── index.ts
```

Here's an example of the Avatar styles found in `avatar.ts`:

```ts title="avatar.ts"
import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };

export const classesAvatar = defineSkeletonClasses({
	root: 'isolate bg-surface-400-600 size-16 rounded-full overflow-hidden',
	image: 'w-full object-cover',
	fallback: 'size-full flex justify-center items-center',
});
```

* We'll cover the import `{ type: 'macro' }` in the [style prefix](#style-prefix) section.
* Use the naming convention of `classes{Component}`
* Create a key for each component part.
* The values provide the default utility classes to the component's class list.
* You can optionally pass an array of strings `['', '']` to document multi-line.
* Make sure to export the component class file in `/packages/skeletlon-common/index.ts`.

### Array Notation

You can optionally provide an array of strings whenever the class list is long or can be split into logical sections. This improves readability. The `defineSkeletonClasses` function will flatten the array into a single string at build time.

```ts title="avatar.ts"
import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };

export const classesProgress = defineSkeletonClasses({
	root: [
		// Common
		'items-center justify-center gap-2',
		// Horizontal Orientation
		'data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',
		// Vertical Orientation
		'data-[orientation=vertical]:inline-flex data-[orientation=vertical]:flex-col',
	],
	// ...
});
```

### Style Prefix

It's worth noting that during build time, Skeleton will automatically prefix each class in the class list with `skb:` (short for "Skeleton Base"). By applying `with { type: 'macro' }` to the import, the import will run `defineSkeletonClasses` specifically at build time. This variant prefix will assign each class to the Tailwind `@base` layer, ensuring user-provided classes take precedence over our internally defined classes. This is accomplished using the following Tailwind custom variant.

```css title="/packages/skeleton/src/variants/base.css"
@custom-variant skb {
	@layer base {
		@slot;
	}
}
```

If you need to prevent a class from being prefixed at build time, apply a variant of `not-skb:` to that class.

> NOTE: This should be a rare use-case requiring discussion with the Skeleton team prior to implementation as it means the user won't be able to override that specific class without using the anti-pattern: `!` for `!important`.

### Importing Class Lists

For Zag primitives, you can import and implement each class list Using Zag's `mergeProps` utility for attributes.

```tsx title="root.tsx"
import type { HTMLAttributes } from '@/internal/html-attributes';
import type { PropsWithElement } from '@/internal/props-with-element';
import { classesAvatar } from '@skeletonlabs/skeleton-common';
import type { Props } from '@zag-js/avatar';
import { mergeProps } from '@zag-js/react';

export interface AvatarRootProps extends Omit, PropsWithElement<'div'>, HTMLAttributes<'div', 'id'> {
	// ...
}

export default function (props: AvatarRootProps) {
	const { children, ...rest } = props;

	const attributes = mergeProps(
		api.getRootProps(),
		{
			className: classesAvatar.root,
		},
		rest,
	);

	return {children};
}
```

The process is similar for custom components without Zag primitives. We still use the Zag `mergeProps` utility, just without the `api.getPartProps()`.

```tsx title="root.tsx"
import { classesNavigation } from '@skeletonlabs/skeleton-common';
import { mergeProps } from '@zag-js/react';

export default function (props: NavigationRootProps) {
	const { children, ...rest } = props;

	const attributes = mergeProps(
		{
			className: classesNavigation.root,
		},
		rest,
	);

	return {children};
}
```

## Testing Components

We recommend you reference existing components to see how we've handled testing. Each framework has slightly different testing conventions, but all utilize [Vitest](https://vitest.dev/) with [Testing Library](https://testing-library.com/).

Test files are located in `packages/skeleton-{framework}/test/components/{component}` and each contain two files:

* `index.test.{tsx|tsx}` - contains the actual test cases.
* `test.{tsx/svelte}` - contains a wrapper component used to provide `data-testid` attributes to each respective component part.

## Additional Resources

* [Component Party](https://component-party.dev/) - easily compare features between each framework
* [React Documentation](https://react.dev/) - the React documentation website.
* [Svelte Documentation](https://svelte.dev/) - the Svelte documentation website.


# Documentation

Guidelines for contributing to the Skeleton documentation website.

## Astro

The Skeleton documentation website is maintained using the Astro framework.

### Integrations

Review the full list of integrations in `astro.config.js`.

* [Partytown](https://docs.astro.build/en/guides/integrations-guide/partytown/)
* [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/)
* [React](https://docs.astro.build/en/guides/integrations-guide/react/)
* [Expressive Code](https://expressive-code.com/)
* [Icon](https://www.astroicon.dev/)
* [AutoImport](https://github.com/delucis/astro-auto-import)
* [MDX (Markdown + JSX)](https://docs.astro.build/en/guides/markdown-content/)

## App Structure

Navigate the app structure within the `/src` directory. This includes the following directories:

\| Path          | Description                                                                                                                   |
\| ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
\| `/components` | Contains our components.                                                                                                      |
\| `/content`    | Contains our MDX content managed with [Astro's content collections](https://docs.astro.build/en/guides/content-collections/). |
\| `/images`     | Contains our images.                                                                                                          |
\| `/lib`        | Contains our modules.                                                                                                         |
\| `/pages`      | Contains our pages.                                                                                                           |

## Pages

### Standard Pages

1. Browse to `/content/docs/` and create a new `.mdx` file
2. Populate all required Frontmatter metadata within the frontmatter `---` fences, see the content configuration in `/src/content.config.ts` for which properties need to be set.
3. New pages will be automatically added to the sidebar navigation.

### Component Pages

Component page content is split into three files within `/content/docs/components//`.

* `meta.mdx` - common frontmatter metadata for the page header (ex: title, description, etc).
* `react.mdx` - examples and usage information specific to the React page.
* `svelte.mdx` - examples and usage information specific to the Svelte page.

### Hidden Pages

If you wish to prevent a page from showing in the navigation, prefix it with an understore: `_example.mdx`.

## Using MDX

View the [Astro MDX Documentation](https://docs.astro.build/en/guides/markdown-content/) or refer to `/src/content/docs/resources/_markdown.md` for a "kitchen sink" example page.

## Doc-Only Components

Functional components for the Astro project are housed in `/src/components`. These support Astro/React.

* Astro - used for simple presentational components without logic.
* React - functional components that implement state, logic, or interaction.

> TIP: For React components, make sure to use [Astro's hydration directives](https://docs.astro.build/en/guides/framework-components/#hydrating-interactive-components).

## Global Components

A suite of global components are automatically imported within MDX pages via [astro-auto-importer](https://github.com/delucis/astro-auto-import/tree/main/packages/astro-auto-import).

> TIP: These components are configure via `astro.config.mjs` > `AutoImport()` in the project root.

### Essential Code

Code Blocks are provided via [Expressive Code](https://expressive-code.com/) via either the `` component or Markdown fences. This is powered by the [Shiki](https://shiki.matsu.io/) syntax highlighter. View the [list of supported languages](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/README.md).

```tsx
Skeleton`} lang="html" />
```

### Preview

Allows you to quickly toggle between an example component and its source code.

```ts
import Default from '@/components/examples/foo/default';
import DefaultRaw from '@/components/examples/foo/default?raw';
```

```astro

	
	

```

#### Framework Specific Code

To allow for a common preview to have framework specific code, use the `codeReact` and `codeSvelte` slots. For generic code that is not framework specific, such as an Astro component along with JavaScript, use the `code` slot instead.

```astro

	
	
		
			
		
		
			
		
		
			
		
		
			
		
	

```

> TIP: For React or Svelte components, make sure to use [Astro's hydration directives](https://docs.astro.build/en/guides/framework-components/#hydrating-interactive-components).

### API Tables

When placed on a component documentation page, these will automatically fetch and display the type schema for the respective component.

```mdx
## API Reference


```

## Icons

### Lucide

This documentation app implements the [React version](https://lucide.dev/guide/packages/lucide-react) of [Lucide](https://lucide.dev/) for most icons. View Iconography details.

### SVG Components

View the [Astro documentation](https://docs.astro.build/en/guides/images/#svg-components) for more information.

Framework Agnostic

Native-First

Simple Standards

Utility-First

Opt-In by Default

Adaptive

Functional Components

Open Source

The Community

Frequent Updates

Figma UI Kit

} />

{#snippet element({ attributes })} {/snippet}

Item 1

Some Example Heading

Framework Agnostic

Native-First

Simple Standards

Utility-First

Opt-In by Default

Adaptive

Functional Components

Open Source

The Community

Frequent Updates

Figma UI Kit

My Own Button} />

{#snippet element({ attributes })} My Own Button {/snippet}

Item 1

Some Example Heading

{item.item.title}

} />

{#snippet element({ attributes })} {/snippet}