` | 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. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; export default function Default() { // Attribution: https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet const content = [ { id: '001', title: 'Your skeleton is made of more than 200 bones', description: 'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.', }, { id: '002', title: 'The smallest bone in the body is in your ear', description: 'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.', }, { id: '003', title: 'One bone isn’t connected to any other bones', description: 'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.', }, ]; return ( {content.map((item) => (

{item.title}

{item.description} ))} ); } ``` ## Controlled Use `value` and `onValueChange` to control the value of the Accordion. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; import { useState } from 'react'; export default function Controlled() { const [value, setValue] = useState(['1']); return ( setValue(details.value)}> {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## Indicator Add an indicator to the trigger with `Accordion.ItemIndicator`. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; import { MinusIcon, PlusIcon } from 'lucide-react'; export default function Indicator() { return ( {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## Collapsible By default you can't close open items. Adding `collapsible` changes this behavior. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; export default function Collapsible() { return ( {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## Multiple Adding `multiple` allows items to open independently. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; export default function Multiple() { return ( {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## Orientation Use the `orientation` prop to change the layout direction of the Accordion. ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; export default function Orientation() { return ( {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## Direction ```tsx import { Accordion } from '@skeletonlabs/skeleton-react'; export default function Dir() { return ( {['1', '2', '3'].map((item) => (

Item {item}

Content for item {item} ))} ); } ``` ## 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? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AccordionRootProviderProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | value | - | AccordionApi\ | - | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AccordionRootContextProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------- | ----------- | | children | - | (accordion: AccordionApi\) => ReactNode | - | ### AccordionItemProps | Property | Default | Type | Description | | --------- | ------- | -------------------------------------------------------------- | --------------------------------------- | | value | - | string | The value of the accordion item. | | disabled? | - | boolean \| undefined | Whether the accordion item is disabled. | | children? | - | ReactNode | - | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AccordionItemTriggerProps | Property | Default | Type | Description | | --------- | ------- | ----------------------------------------------------------------- | --------------------------- | | children? | - | ReactNode | - | | element? | - | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself | ### AccordionItemIndicatorProps | Property | Default | Type | Description | | --------- | ------- | -------------------------------------------------------------- | --------------------------- | | children? | - | ReactNode | - | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AccordionItemContentProps | Property | Default | Type | Description | | --------- | ------- | -------------------------------------------------------------- | --------------------------- | | children? | - | ReactNode | - | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | # App Bar A header element for the top of your page layout. ```tsx import { AppBar } from '@skeletonlabs/skeleton-react'; import { CalendarIcon } from 'lucide-react'; import { CircleUserIcon } from 'lucide-react'; import { MenuIcon } from 'lucide-react'; import { SearchIcon } from 'lucide-react'; export default function Default() { return (

Skeleton

); } ``` ## Centered Control the layout using a [grid-cols-\*](https://tailwindcss.com/docs/grid-column) utility class. ```tsx import { AppBar } from '@skeletonlabs/skeleton-react'; import { CalendarIcon } from 'lucide-react'; import { CircleUserIcon } from 'lucide-react'; import { MenuIcon } from 'lucide-react'; import { SearchIcon } from 'lucide-react'; export default function Centered() { return (

Headline

); } ``` ## Extended Move the `` to a new row within the root. ```tsx import { AppBar } from '@skeletonlabs/skeleton-react'; import { CalendarIcon } from 'lucide-react'; import { CircleUserIcon } from 'lucide-react'; import { MenuIcon } from 'lucide-react'; import { SearchIcon } from 'lucide-react'; export default function Extended() { return (

Headline

); } ``` ## Responsive ```tsx import { AppBar } from '@skeletonlabs/skeleton-react'; import { CalendarIcon } from 'lucide-react'; import { CircleUserIcon } from 'lucide-react'; import { MenuIcon } from 'lucide-react'; import { SearchIcon } from 'lucide-react'; export default function Responsive() { return ( <> {/* 1. Set dynamic spacing */} {/* 2. Set dynamic layout columns */} {/* 3. Set Mobile display */}

Headline

{/* 4. Set Desktop display */}

Headline

); } ``` ## API Reference ### AppBarRootProps | Property | Default | Type | Description | | -------- | ------- | ----------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"header">) => Element) \| undefined | Render the element yourself | ### AppBarToolbarProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AppBarLeadProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | Render the element yourself | ### AppBarHeadlineProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AppBarTrailProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | Render the element yourself | # Avatar An image with a fallback for representing the user. ```tsx import { Avatar } from '@skeletonlabs/skeleton-react'; export default function Default() { return ( SK ); } ``` ## Fallback Use `` to provide initials, icons, or a framework-specific image component. ```tsx import { Avatar } from '@skeletonlabs/skeleton-react'; export default function Fallback() { return ( SK ); } ``` ## Filter Avatars can implement [SVG Filters](/docs/guides/cookbook/svg-filters) using the image `className` attribute. ```tsx import { Avatar } from '@skeletonlabs/skeleton-react'; export default function Filter() { return ( <> 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? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AvatarRootProviderProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | value | - | AvatarApi\ | - | | element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself | ### AvatarRootContextProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------- | ----------- | | children | - | (avatar: AvatarApi\) => ReactNode | - | ### AvatarImageProps | Property | Default | Type | Description | | -------- | ------- | -------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"img">) => Element) \| undefined | Render the element yourself | ### AvatarFallbackProps | Property | Default | Type | Description | | -------- | ------- | --------------------------------------------------------------- | --------------------------- | | element? | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself | # Collapsible A container that can be expanded or collapsed to show or hide content. ```tsx import { Collapsible } from '@skeletonlabs/skeleton-react'; export default function Default() { return ( Toggle Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et? ); } ``` ## Controlled ```tsx import { Collapsible } from '@skeletonlabs/skeleton-react'; import { useState } from 'react'; export default function Controlled() { const [open, setOpen] = useState(false); return ( setOpen(details.open)}> {open ? 'Close' : 'Open'} Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et? ); } ``` ## Indicator ```tsx import { Collapsible } from '@skeletonlabs/skeleton-react'; import { MinusIcon, PlusIcon } from 'lucide-react'; export default function Default() { return ( 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 ```tsx import { Collapsible } from '@skeletonlabs/skeleton-react'; export default function Disabled() { return ( Toggle Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas maxime in praesentium reiciendis eveniet modi mollitia? Odio accusantium veritatis accusamus quia placeat sapiente reiciendis? Consectetur, quis! Voluptatem omnis accusantium blanditiis. ); } ``` ## Alignment ```tsx import { Collapsible } from '@skeletonlabs/skeleton-react'; export default function Alignment() { return ( Toggle Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et? ); } ``` {/* 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?         | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined              | Render the element yourself                                                                                                        |

### CollapsibleRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | CollapsibleApi\                                     | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### CollapsibleRootContextProps

| Property | Default | Type                                                   | Description |
| -------- | ------- | ------------------------------------------------------ | ----------- |
| children | -       | (collapsible: CollapsibleApi\) => ReactNode | -           |

### CollapsibleTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### CollapsibleIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### CollapsibleContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| 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.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Default() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			Label
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

## Groups

Create labelled groups for your items.

```tsx
'use client';

import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple', type: 'Fruits' },
	{ label: 'Banana', value: 'banana', type: 'Fruits' },
	{ label: 'Orange', value: 'orange', type: 'Fruits' },
	{ label: 'Carrot', value: 'carrot', type: 'Vegetables' },
	{ label: 'Broccoli', value: 'broccoli', type: 'Vegetables' },
	{ label: 'Spinach', value: 'spinach', type: 'Vegetables' },
];

export default function Group() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		groupBy: (item) => item.type,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			
				
				
			
			
				
					
						{collection.group().map(([type, items]) => (
							
								{type}
								{items.map((item) => (
									
										{item.label}
										
									
								))}
							
						))}
					
				
			
		
	);
}

```

## Auto Highlight

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

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function AutoHighlight() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

## Multiple

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

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Default() {
	const [value, setValue] = useState([]);
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	const onValueChange: ComboboxRootProps['onValueChange'] = (event) => {
		setValue(event.value);
	};

	return (
		
			
				
					
					
				
				
					
						
							{items.map((item) => (
								
									{item.label}
									
								
							))}
						
					
				
			
			
				{value.map((item) => (
					
						{item}
					
				))}
			
		
	);
}

```

## Disabled Item

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Default() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		isItemDisabled: (item) => item.value === 'banana',
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

## Custom Filter

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

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import Fuse from 'fuse.js';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

const fuse = new Fuse(data, {
	keys: ['label', 'value'],
	threshold: 0.3,
});

export default function Default() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const results = fuse.search(event.inputValue);
		if (results.length > 0) {
			setItems(results.map((result) => result.item));
		} else {
			setItems(data);
		}
	};

	return (
		
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

## Direction

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Dir() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			Label
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

## 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.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function ZIndex() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		
			
				
				
			
			
				
					
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				
			
		
	);
}

```

### 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?                 | -                              | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                                                                                                 | Render the element yourself                                                                                                                                                                                                                              |

### ComboboxRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | ComboboxApi\                                   | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ComboboxRootContextProps

| Property | Default | Type                                                  | Description |
| -------- | ------- | ----------------------------------------------------- | ----------- |
| children | -       | (combobox: ComboboxApi\) => ReactNode | -           |

### ComboboxLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### ComboboxControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ComboboxInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### ComboboxTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### ComboboxPositionerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ComboboxContentProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | Render the element yourself |

### ComboboxItemGroupProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ComboboxItemGroupLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| 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?      | -       | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | Render the element yourself                                 |

### ComboboxItemTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### ComboboxItemIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |


# Date Picker

Select dates from a calendar interface.

```tsx
import { DatePicker, Portal } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				
				
			
			
				
					
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## Controlled

Manage the selected date value with React state.

```tsx
import { DatePicker, parseDate, Portal } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState([parseDate('2025-10-15')]);

	return (
		 setValue(e.value)}>
			Picked date: {value.at(0)?.toString()}
			
				
				
			
			
				
					
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## Disabled

Disable the date picker to prevent user interaction.

```tsx
import { DatePicker, Portal } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		
			Label
			
				
				
			
			
				
					
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## Minimum and Maximum

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

```tsx
import { DatePicker, parseDate, Portal } from '@skeletonlabs/skeleton-react';

export default function MinMax() {
	return (
		
			Label
			
				
				
			
			
				
					
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## 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.

```tsx
import { DatePicker, Portal } from '@skeletonlabs/skeleton-react';

export default function Range() {
	return (
		
			Select Date Range
			
				
				
				
			
			
				
					
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## 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.

```tsx
import { DatePicker } from '@skeletonlabs/skeleton-react';

export default function Inline() {
	return (
		
			Label
			
				
					
						{(datePicker) => (
							<>
								
									
									
										
									
									
								
								
									
										
											{datePicker.weekDays.map((weekDay, id) => (
												{weekDay.short}
											))}
										
									
									
										{datePicker.weeks.map((week, id) => (
											
												{week.map((day, id) => (
													
														{day.day}
													
												))}
											
										))}
									
								
							
						)}
					
				
				
					
						{(datePicker) => (
							<>
								
									
									
										
									
									
								
								
									
										{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
											
												{months.map((month, id) => (
													
														{month.label}
													
												))}
											
										))}
									
								
							
						)}
					
				
				
					
						{(datePicker) => (
							<>
								
									
									
										
									
									
								
								
									
										{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
											
												{years.map((year, id) => (
													
														{year.label}
													
												))}
											
										))}
									
								
							
						)}
					
				
			
		
	);
}

```

## Month and Year Selection

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

```tsx
import { DatePicker, Portal } from '@skeletonlabs/skeleton-react';

export default function WithSelects() {
	return (
		
			Label
			
				
				
			
			
				
					
						
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												
													{datePicker.weekDays.map((weekDay, id) => (
														{weekDay.short}
													))}
												
											
											
												{datePicker.weeks.map((week, id) => (
													
														{week.map((day, id) => (
															
																{day.day}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													
														{months.map((month, id) => (
															
																{month.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
						
							
								{(datePicker) => (
									<>
										
											
											
												
											
											
										
										
											
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													
														{years.map((year, id) => (
															
																{year.label}
															
														))}
													
												))}
											
										
									
								)}
							
						
					
				
			
		
	);
}

```

## 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 render prop 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.

```tsx
import { parseDate } from '@skeletonlabs/skeleton-react';

const date = parseDate('2025-10-15');
const minDate = parseDate('2024-01-01');
const maxDate = parseDate('2024-12-31');
```

## 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?              | -        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                            | Render the element yourself                                                                                                                                                                 |

### DatePickerRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | DatePickerApi\                                      | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerRootContextProps

| Property | Default | Type                                                 | Description |
| -------- | ------- | ---------------------------------------------------- | ----------- |
| children | -       | (datePicker: DatePickerApi\) => ReactNode | -           |

### DatePickerLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### DatePickerControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerPresetTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| value    | -       | PresetTriggerValue                                                | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| 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?   | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself             |

### DatePickerTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### DatePickerPositionerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerYearSelectProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"select">) => Element) \| undefined | Render the element yourself |

### DatePickerMonthSelectProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"select">) => Element) \| undefined | Render the element yourself |

### DatePickerViewProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| view     | -       | DateView                                                       | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerViewControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerPrevTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### DatePickerViewTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### DatePickerRangeTextProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DatePickerNextTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### DatePickerTableProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"table">) => Element) \| undefined | Render the element yourself |

### DatePickerTableHeadProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"thead">) => Element) \| undefined | Render the element yourself |

### DatePickerTableRowProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"tr">) => Element) \| undefined | Render the element yourself |

### DatePickerTableHeaderProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"th">) => Element) \| undefined | Render the element yourself |

### DatePickerTableBodyProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"tbody">) => Element) \| undefined | Render the element yourself |

### DatePickerTableCellProps

| Property      | Default | Type                                                          | Description                 |
| ------------- | ------- | ------------------------------------------------------------- | --------------------------- |
| disabled?     | -       | boolean \| undefined                                          | -                           |
| value         | -       | number \| DateValue                                           | -                           |
| columns?      | -       | number \| undefined                                           | -                           |
| visibleRange? | -       | VisibleRange \| undefined                                     | -                           |
| element?      | -       | ((attributes: HTMLAttributes\<"td">) => Element) \| undefined | Render the element yourself |

### DatePickerTableCellTriggerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |


# Dialog

A modal dialog for displaying content and actions.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			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.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';

export default function AlertDialog() {
	return (
		
			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.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';

export default function Interaction() {
	return (
		
			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.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';
import { XIcon } from 'lucide-react';

export default function Drawer() {
	return (
		
			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.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';

export default function ZIndex() {
	return (
		
			Trigger
			
				
				
					
						Setting Z-Index
						This dialog will have a z-index value of 50.
						Close
					
				
			
		
	);
}

```

## Direction

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			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.

```tsx
import { Dialog, Portal } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';

export default function Headless() {
	return (
		
			
				
			
			
				
				
					
						
							
								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                                                                                                                    |
| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| children?               | -        | ReactNode                                                                                                                                                     | -                                                                                                                              |
| 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 |

### DialogRootProviderProps

| Property  | Default | Type                  | Description |
| --------- | ------- | --------------------- | ----------- |
| value     | -       | DialogApi\ | -           |
| children? | -       | ReactNode             | -           |

### DialogRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | (dialog: DialogApi\) => ReactNode | -           |

### DialogTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### DialogBackdropProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DialogPositionerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DialogContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DialogTitleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DialogDescriptionProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### DialogCloseTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |


# File Upload

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

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				Browse Files
				
			
			
				
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							
								{file.name}
								{file.size} bytes
								
							
						))
					}
				
			
		
	);
}

```

## Custom Content

Supply your own text and icons within the dropzone.

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
import { FileIcon } from 'lucide-react';

export default function Default() {
	return (
		
			
				
				Select file or drag here.
				Browse Files
				
			
			
				
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							
								{file.name}
								{file.size} bytes
								
							
						))
					}
				
			
		
	);
}

```

## Disabled

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		
			
				Browse Files
				
			
			
				
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							
								{file.name}
								{file.size} bytes
								
							
						))
					}
				
			
		
	);
}

```

## Button Only

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';

export default function Button() {
	return (
		
			Browse Files
			
		
	);
}

```

## Clear Files

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

```tsx
import { FileUpload, useFileUpload } from '@skeletonlabs/skeleton-react';

export default function ClearFiles() {
	const fileUpload = useFileUpload({
		defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
	});
	return (
		
			
				
					Browse Files
					
				
				
					
						{(fileUpload) =>
							fileUpload.acceptedFiles.map((file) => (
								
									{file.name}
									{file.size} bytes
									
								
							))
						}
					
				
			
			
		
	);
}

```

## Direction

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			Label
			
				Browse Files
				
			
			
				
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							
								{file.name}
								{file.size} bytes
								
							
						))
					}
				
			
		
	);
}

```

## 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?              | -        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                              | Render the element yourself                                                                                       |

### FileUploadRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | FileUploadApi\                                      | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### FileUploadRootContextProps

| Property | Default | Type                                                 | Description |
| -------- | ------- | ---------------------------------------------------- | ----------- |
| children | -       | (fileUpload: FileUploadApi\) => ReactNode | -           |

### FileUploadLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### FileUploadDropzoneProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### FileUploadTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### FileUploadHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### FileUploadItemGroupProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | Render the element yourself |

### FileUploadItemProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| file     | -       | File                                                          | -                           |
| type?    | -       | ItemType \| undefined                                         | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | Render the element yourself |

### FileUploadItemNameProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### FileUploadItemSizeTextProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### FileUploadItemDeleteTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |


# Listbox

Select one or more items from a list of options.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Default() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		
			Label
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## Groups

Create labelled groups for your items.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple', type: 'Fruits' },
	{ label: 'Banana', value: 'banana', type: 'Fruits' },
	{ label: 'Orange', value: 'orange', type: 'Fruits' },
	{ label: 'Carrot', value: 'carrot', type: 'Vegetables' },
	{ label: 'Broccoli', value: 'broccoli', type: 'Vegetables' },
	{ label: 'Spinach', value: 'spinach', type: 'Vegetables' },
];

export default function Group() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		groupBy: (item) => item.type,
	});

	return (
		
			Label
			
				{collection.group().map(([type, items]) => (
					
						{type}
						{items.map((item) => (
							
								{item.label}
								
							
						))}
					
				))}
			
		
	);
}

```

## Multiple

Select multiple items from the list.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Multiple() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		
			Label
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## Disabled

Disable the entire listbox.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Disabled() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		
			Label
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## Disabled Item

Disable specific items in the list.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function DisabledItem() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		isItemDisabled: (item) => item.value === 'banana',
	});

	return (
		
			Label
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## Search

Add a search input to filter items.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
import { useMemo, useState } from 'react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Search() {
	const [query, setQuery] = useState('');

	const collection = useMemo(() => {
		const items = data.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
		return useListCollection({ items });
	}, [query]);

	return (
		
			Label
			 setQuery(e.currentTarget.value)} />
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## Direction

Control the text direction of the listbox.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

const data = [
	{ label: 'Apple', value: 'apple' },
	{ label: 'Banana', value: 'banana' },
	{ label: 'Orange', value: 'orange' },
	{ label: 'Carrot', value: 'carrot' },
	{ label: 'Broccoli', value: 'broccoli' },
	{ label: 'Spinach', value: 'spinach' },
];

export default function Dir() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		
			Label
			
				{collection.items.map((item) => (
					
						{item.label}
						
					
				))}
			
		
	);
}

```

## 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?                 | -          | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                   | Render the element yourself                                                                                                                                                                                                                                                       |

### ListboxRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | ListboxApi\                                    | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ListboxRootContextProps

| Property | Default | Type                                                | Description |
| -------- | ------- | --------------------------------------------------- | ----------- |
| children | -       | (listbox: ListboxApi\) => ReactNode | -           |

### ListboxLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### ListboxInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### ListboxContentProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | Render the element yourself |

### ListboxItemGroupProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ListboxItemGroupLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| 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?          | -       | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | Render the element yourself            |

### ListboxItemTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### ListboxItemIndicatorProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |


# Navigation

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

## Bar

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorBar = 'btn hover:preset-tonal flex-col items-center gap-1';

	return (
		
			
				Contents
			
			
				
					{links.map((link) => {
						const Icon = link.icon;
						return (
							
								
								{link.label}
							
						);
					})}
				
			
		
	);
}

```

* 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

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { SkullIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorRail = 'btn hover:preset-tonal aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5';

	return (
		
			
				
					
						
					
				
				
					
						{links.map((link) => {
							const Icon = link.icon;
							return (
								
									
									{link.label}
								
							);
						})}
					
				
				
					
						
					
				
			
			
				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

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BikeIcon } from 'lucide-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { MountainIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { SailboatIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
import { SkullIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';
import { WavesIcon } from 'lucide-react';

export default function Default() {
	const linksSidebar = {
		entertainment: [
			{ label: 'Books', href: '#', icon: BookIcon },
			{ label: 'Movies', href: '#', icon: PopcornIcon },
			{ label: 'Television', href: '#', icon: TvIcon },
		],
		recreation: [
			{ label: 'Biking', href: '#', icon: BikeIcon },
			{ label: 'Sailing', href: '#', icon: SailboatIcon },
			{ label: 'Hiking', href: '#', icon: MountainIcon },
			{ label: 'Swimming', href: '#', icon: WavesIcon },
		],
	};
	let anchorSidebar = 'btn hover:preset-tonal justify-start px-2 w-full';

	return (
		
			
				
					
						
					
				
				
					
						
							
								
								Home
							
						
					
					{Object.entries(linksSidebar).map(([category, links]) => (
						
							{category}
							
								{links.map((link) => {
									const Icon = link.icon;
									return (
										
											
											{link.label}
										
									);
								})}
							
						
					))}
				
				
					
						
						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.

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';
import { ArrowLeftRightIcon } from 'lucide-react';
import { useState } from 'react';

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];

	const buttonClasses = 'btn hover:preset-tonal';
	let anchorRail = `${buttonClasses} aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5`;
	let anchorSidebar = `${buttonClasses} justify-start px-2 w-full`;

	let [layoutRail, setLayoutRail] = useState(true);

	function toggleLayout() {
		setLayoutRail(!layoutRail);
	}

	return (
		
			
				
					
						{links.map((link) => {
							const Icon = link.icon;
							return (
								
									
									{link.label}
								
							);
						})}
					
				
				
					
				
			
			
				Contents
			
		
	);
}

```

## 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? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself                                                                  |

### NavigationHeaderProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"header">) => Element) \| undefined | Render the element yourself |

### NavigationContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### NavigationGroupProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### NavigationLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### NavigationMenuProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### NavigationFooterProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"footer">) => Element) \| undefined | Render the element yourself |


# Pagination

Navigate between multiple pages of content.

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Default() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		
			
					{data.map((user) => (
						
					))}
				
				
					
						ID
						Name
						Email
						Country
					
				
				
							{user.id}
							{user.name}
							{user.email}
							{user.country}
						
			
			 setPage(event.page)}>
				
					
				
				
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								
									{page.value}
								
							) : (
								
									…
								
							),
						)
					}
				
				
					
				
			
		
	);
}

```

## Page Size

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

export default function Default() {
	const [page, setPage] = useState(1);
	const [pageSize, setPageSize] = useState(5);

	const start = (page - 1) * pageSize;
	const end = start + pageSize;
	const data = users.slice(start, end);

	return (
		
			
					{data.map((user) => (
						
					))}
				
				
					
						ID
						Name
						Email
						Country
					
				
				
							{user.id}
							{user.name}
							{user.email}
							{user.country}
						
			
			
				
					Page Size
					
				

				 setPage(event.page)}>
					
						
					
					
						{(pagination) =>
							pagination.pages.map((page, index) =>
								page.type === 'page' ? (
									
										{page.value}
									
								) : (
									
										…
									
								),
							)
						}
					
					
						
					
				
			
		
	);
}

```

## Direction

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Dir() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		
			
					{data.map((user) => (
						
					))}
				
				
					
						ID
						Name
						Email
						Country
					
				
				
							{user.id}
							{user.name}
							{user.email}
							{user.country}
						
			
			 setPage(event.page)} dir="rtl">
				
					
				
				
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								
									{page.value}
								
							) : (
								
									…
								
							),
						)
					}
				
				
					
				
			
		
	);
}

```

## 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 */}

```tsx

	...

```

## 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?          | -        | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined                                                                                           | Render the element yourself                                                                                                      |

### PaginationRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | PaginationApi\                                      | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | Render the element yourself |

### PaginationRootContextProps

| Property | Default | Type                                                 | Description |
| -------- | ------- | ---------------------------------------------------- | ----------- |
| children | -       | (pagination: PaginationApi\) => ReactNode | -           |

### PaginationPrevTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### PaginationItemProps

| Property | Default | Type                                                         | Description                 |
| -------- | ------- | ------------------------------------------------------------ | --------------------------- |
| type     | -       | "page"                                                       | -                           |
| value    | -       | number                                                       | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"a">) => Element) \| undefined | Render the element yourself |

### PaginationEllipsisProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| index    | -       | number                                                          | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### PaginationNextTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |


# Popover

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

```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Trigger
			
				
					
						Title
						
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						
						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.

```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';

export default function Arrow() {
	return (
		
			Trigger
			
				
					
						Title
						
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						
						Close
						
							
						
					
				
			
		
	);
}

```

## 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.

```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';

export default function ZIndex() {
	return (
		
			
				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.

```tsx
import { Popover, Portal, usePopover } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const popover = usePopover({
		closeOnInteractOutside: false,
	});

	function showAndHide() {
		popover.setOpen(true);
		setTimeout(() => {
			popover.setOpen(false);
		}, 3000);
	}
	return (
		
			

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

```

## Direction

```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			Trigger
			
				
					
						Title
						
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						
						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.

```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';

export default function Headless() {
	return (
		
			Trigger
			
				
					
						Title
						
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						
						Close
					
				
			
		
	);
}

```

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                                                                                                                                                                                                                                           |
| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children?               | -       | ReactNode                                                                                                                                                                  | -                                                                                                                                                                                                                                                     |
| autoFocus?              | true    | boolean \| undefined                                                                                                                                                       | Whether to automatically set focus on the first focusable
content within the popover when opened.                                                                                                                                                 |
| 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.                                                                                                                     |
| 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                                                                                                                        |

### PopoverRootProviderProps

| Property  | Default | Type                   | Description |
| --------- | ------- | ---------------------- | ----------- |
| value     | -       | PopoverApi\ | -           |
| children? | -       | ReactNode              | -           |

### PopoverRootContextProps

| Property | Default | Type                                           | Description |
| -------- | ------- | ---------------------------------------------- | ----------- |
| children | -       | (popover: PopoverApi\) => ReactNode | -           |

### PopoverTriggerProps

| Property  | Default | Type                                                              | Description                 |
| --------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| children? | -       | ReactNode                                                         | -                           |
| element?  | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### PopoverPositionerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverArrowProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverArrowTipProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverTitleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverDescriptionProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### PopoverCloseTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |


# Portal

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

```tsx
import { Portal } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';
import { useState, useRef } from 'react';

export default function Default() {
	const [disabled, setDisabled] = useState(true);
	const ref = useRef(null);

	const cardClasses = 'card preset-outlined-surface-300-700 size-24 grid place-items-center p-4';
	const buttonClasses = 'col-span-2 btn preset-filled';

	return (
		
			{/* Source */}
			
				
					
				
			

			{/* Target */}
			
				{/* (the content will appear here) */}
			

			{/* Trigger */}
			
		
	);
}

```

## 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  | -             | string \| number \| bigint \| boolean \| ReactElement\> \| Iterable\ \| ReactPortal \| Promise\<...> \| null | -                                                                                 |


# Progress Circular

An indicator showing the progress or completion of a task.

```tsx
import { Progress, Slider } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Default() {
	const [value, setValue] = useState(50);
	return (
		
			
				Label
				
					
					
				
				
			
			 setValue(e.value[0])} step={10}>
				
					
						
					
					
						
					
				
			
		
	);
}

```

## Size

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
import type { CSSProperties } from 'react';

export default function Size() {
	return (
		
			
				
					
					
				
			
			
				
					
					
				
			
			
				
					
					
				
			
		
	);
}

```

## Color

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		
			
				
					
					
				
			
			
				
					
					
				
			
			
				
					
					
				
			
		
	);
}

```

## Centered Content

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function CenteredContent() {
	return (
		
			
				
			
			
				
				
			
		
	);
}

```

## Indeterminate

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

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				
				
			
			
		
	);
}

```

## 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)

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Format() {
	return (
		
			
				
					
					
				
				
			
			
				
					
					
				
				
			
			
				
					
					
				
				
			
		
	);
}

```

## Custom Value Text

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function CustomValueText() {
	return (
		
			
				
				
			
			
				{(progress) => `${progress.value} of ${progress.max}`}
			
		
	);
}

```

## 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?       | -                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                          | Render the element yourself                                                                                                |

### ProgressRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | ProgressApi\                                        | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRootContextProps

| Property | Default | Type                                             | Description |
| -------- | ------- | ------------------------------------------------ | ----------- |
| children | -       | (progress: ProgressApi\) => ReactNode | -           |

### ProgressLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressValueTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### ProgressTrackProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRangeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressCircleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | Render the element yourself |

### ProgressCircleTrackProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |

### ProgressCircleRangeProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |


# Progress Linear

An indicator showing the progress or completion of a task.

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				
			
			
				
			
		
	);
}

```

## Color

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

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		
			
				
					
				
			
			
				
					
				
			
			
				
					
				
			
		
	);
}

```

## Height

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Height() {
	return (
		
			
				
					
				
			
			
				
					
				
			
			
				
					
				
			
		
	);
}

```

## Orientation

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

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Orientation() {
	return (
		
			
				
			
		
	);
}

```

## Indeterminate

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

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Indeterminate() {
	return (
		
			
				
			
		
	);
}

```

### Custom Animation

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function CustomAnimation() {
	return (
		<>
			
				
					
				
			
			
		
	);
}

```

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.

```tsx
export default function Native() {
	return ;
}

```

## Direction

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			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?       | -                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                          | Render the element yourself                                                                                                |

### ProgressRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | ProgressApi\                                        | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRootContextProps

| Property | Default | Type                                             | Description |
| -------- | ------- | ------------------------------------------------ | ----------- |
| children | -       | (progress: ProgressApi\) => ReactNode | -           |

### ProgressLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressValueTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### ProgressTrackProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRangeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressCircleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | Render the element yourself |

### ProgressCircleTrackProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |

### ProgressCircleRangeProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |


# Rating Group

Rating Group allows users to rate something

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				
					{(ratingGroup) => ratingGroup.items.map((index) => )}
				
			
			
		
	);
}

```

## Allow Half

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Half() {
	return (
		
			
				
					{(ratingGroup) => ratingGroup.items.map((index) => )}
				
			
			
		
	);
}

```

## Custom Icons

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { BoneIcon, SkullIcon } from 'lucide-react';

export default function CustomIcons() {
	return (
		
			
				
					{(ratingGroup) =>
						ratingGroup.items.map((index) => } full={} />)
					}
				
			
			
		
	);
}

```

## Label

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Label() {
	return (
		
			Rate us:
			
				
					{(ratingGroup) => ratingGroup.items.map((index) => )}
				
			
			
		
	);
}

```

## Disabled

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Page() {
	return (
		
			
				
					{(ratingGroup) => ratingGroup.items.map((index) => )}
				
			
			
		
	);
}

```

## Direction

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			Label
			
				
					{(ratingGroup) => ratingGroup.items.map((index) => )}
				
			
			
		
	);
}

```

## 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?       | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                               | Render the element yourself                                                                                    |

### RatingGroupRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | RatingGroupApi\                                     | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### RatingGroupRootContextProps

| Property | Default | Type                                                   | Description |
| -------- | ------- | ------------------------------------------------------ | ----------- |
| children | -       | (ratingGroup: RatingGroupApi\) => ReactNode | -           |

### RatingGroupLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### RatingGroupControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### RatingGroupItemProps

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

### RatingGroupHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |


# Segmented Control

Capture input for a limited set of options.

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				
				
					Item 1
					
				
				
					Item 2
					
				
				
					Item 3
					
				
			
		
	);
}

```

## Icons

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
import { AlignStartVerticalIcon, AlignCenterVerticalIcon, AlignEndVerticalIcon } from 'lucide-react';

export default function Icons() {
	return (
		
			
				
				
					
						
					
					
				
				
					
						
					
					
				
				
					
						
					
					
				
			
		
	);
}

```

## Orientation

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Orientation() {
	return (
		
			
				
				
					Item 1
					
				
				
					Item 2
					
				
				
					Item 3
					
				
			
		
	);
}

```

## Read Only

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function ReadOnly() {
	return (
		
			
				
				
					Item 1
					
				
				
					Item 2
					
				
				
					Item 3
					
				
			
		
	);
}

```

## Disabled

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		
			
				
				
					Item 1
					
				
				
					Item 2
					
				
				
					Item 3
					
				
			
		
	);
}

```

## Disabled Item

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function DisabledItem() {
	return (
		
			
				
				
					Item 1
					
				
				
					Item 2
					
				
				
					Item 3
					
				
			
		
	);
}

```

## Direction

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			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?       | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                         | Render the element yourself                                                                                                |

### SegmentedControlRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | RadioGroupApi\                                      | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SegmentedControlRootContextProps

| Property | Default | Type                                                  | Description |
| -------- | ------- | ----------------------------------------------------- | ----------- |
| children | -       | (ratingGroup: RadioGroupApi\) => ReactNode | -           |

### SegmentedControlLabelProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### SegmentedControlControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SegmentedControlIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SegmentedControlItemProps

| Property  | Default | Type                                                             | Description                 |
| --------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| value     | -       | string                                                           | -                           |
| disabled? | -       | boolean \| undefined                                             | -                           |
| invalid?  | -       | boolean \| undefined                                             | -                           |
| element?  | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### SegmentedControlItemTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### SegmentedControlItemHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |


# Slider

Capture input from a range of values.

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				
					
				
				
					
				
			
			
				
				
				
			
		
	);
}

```

## Color

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		
			
				
					
						
					
					
						
					
				
			
			
				
					
						
					
					
						
					
				
			
			
				
					
						
					
					
						
					
				
			
		
	);
}

```

## Disabled

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		
			
				
					
				
				
					
				
			
		
	);
}

```

## Readonly

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Readonly() {
	return (
		
			
				
					
				
				
					
				
			
		
	);
}

```

## Multiple Thumbs

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function MultipleThumbs() {
	return (
		
			
				
					
				
				
					
				
				
					
				
			
		
	);
}

```

## Direction

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			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?               | -            | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                          | Render the element yourself                                                                                                                                                                                                                                                                                          |

### SliderRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | SliderApi\                                          | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | (slider: SliderApi\) => ReactNode | -           |

### SliderLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### SliderValueTextProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"output">) => Element) \| undefined | Render the element yourself |

### SliderControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderTrackProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderRangeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderThumbProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| index    | -       | number                                                         | -                           |
| name?    | -       | string \| undefined                                            | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### SliderMarkerGroupProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderMarkerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | number                                                         | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |


# Switch

Toggle between two states, such as on/off.

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				
			
			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]`

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';

export default function Colors() {
	return (
		
			
				
			
			Label
			
		
	);
}

```

## List

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';

export default function List() {
	return (
		
			{['Option 1', 'Option 2', 'Option 3'].map((label, i) => (
				
					
						{label}
						
							
						
						
					
					{i < 2 && }
				
			))}
		
	);
}

```

## Icons

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
import { MoonIcon, SunIcon } from 'lucide-react';

export default function ThumbIcons() {
	return (
		
			
			
				
					
						{(switch_) => (switch_.checked ?  : )}
					
				
			
			Label
		
	);
}

```

## Direction

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			
				
			
			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?         | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined                                              | Render the element yourself                                                                                                    |

### SwitchRootProviderProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| value    | -       | SwitchApi\                                            | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### SwitchRootContextProps

| Property | Default | Type                                           | Description |
| -------- | ------- | ---------------------------------------------- | ----------- |
| children | -       | (switch\_: SwitchApi\) => ReactNode | -           |

### SwitchControlProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### SwitchThumbProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### SwitchLabelProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### SwitchHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |


# Tabs

Use tabs to quickly switch between different views and pages.

```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				Tab 1
				Tab 2
				Tab 3
				
			
			Content for Tab 1
			Content for Tab 2
			Content for Tab 3
		
	);
}

```

## Fluid Width

```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Fluid() {
	return (
		
			
				
					Tab 1
				
				
					Tab 2
				
				
					Tab 3
				
				
			
			Content for Tab 1
			Content for Tab 2
			Content for Tab 3
		
	);
}

```

## Vertical

```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Vertical() {
	return (
		
			
				Tab 1
				Tab 2
				Tab 3
				
			
			Content for Tab 1
			Content for Tab 2
			Content for Tab 3
		
	);
}

```

## Direction

```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			
				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?        | -            | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                     | Render the element yourself                                                                                                                                                                                       |

### TabsRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | TabsApi\                                            | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TabsRootContextProps

| Property | Default | Type                                     | Description |
| -------- | ------- | ---------------------------------------- | ----------- |
| children | -       | (tabs: TabsApi\) => ReactNode | -           |

### TabsListProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| 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?  | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TabsIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TabsContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | string                                                         | The value of the tab        |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |


# Tags Input

Allows input of multiple values.

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							
								
									{value}
									
								
								
							
						))
					}
				
				
			
			Clear All
			
		
	);
}

```

## Custom Icon

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
import { CircleXIcon } from 'lucide-react';

export default function Default() {
	return (
		
			
				
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							
								
									{value}
									
										
									
								
								
							
						))
					}
				
				
			
			
		
	);
}

```

## Color

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			
				
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							
								
									{value}
									
								
								
							
						))
					}
				
				
			
			
		
	);
}

```

## Provider Pattern

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

```tsx
import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const tagsInput = useTagsInput({
		defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
	});

	return (
		
			
				
					
						{(tagsInput) =>
							tagsInput.value.map((value, index) => (
								
									
										{value}
										
									
									
								
							))
						}
					
					
				
				
			

			{/* Programmatic Controls */}
			
				
			
		
	);
}

```

## Direction

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			Label
			
				
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							
								
									{value}
									
								
								
							
						))
					}
				
				
			
			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?              | -        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                             | Render the element yourself                                                                                                                         |

### TagsInputRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | TagsInputApi\                                       | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputRootContextProps

| Property | Default | Type                                               | Description |
| -------- | ------- | -------------------------------------------------- | ----------- |
| children | -       | (tagsInput: TagsInputApi\) => ReactNode | -           |

### TagsInputLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### TagsInputControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputItemProps

| Property  | Default | Type                                                            | Description                 |
| --------- | ------- | --------------------------------------------------------------- | --------------------------- |
| index     | -       | string \| number                                                | -                           |
| value     | -       | string                                                          | -                           |
| disabled? | -       | boolean \| undefined                                            | -                           |
| element?  | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TagsInputItemPreviewProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputItemTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TagsInputItemDeleteTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TagsInputItemInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### TagsInputInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### TagsInputClearTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TagsInputHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |


# Toast

Display brief messages to users.

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const toaster = createToaster({});

	return (
		<>
			
			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						
					
				)}
			
		
	);
}

```

## 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, and use a shared `createToaster()` instance to trigger messages to that group from anywhere in your application.

## Type

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Type() {
	const toaster = createToaster({});

	return (
		<>
			
				
				
				
				
			
			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						
					
				)}
			
		
	);
}

```

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.

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Action() {
	const toaster = createToaster({});

	return (
		<>
			

			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						{toast.action && {toast.action.label}}
						
					
				)}
			
		
	);
}

```

## Closable

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

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Closable() {
	const toaster = createToaster({});

	return (
		<>
			
			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						{toast.closable && }
					
				)}
			
		
	);
}

```

## Placement

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Placement() {
	const toaster = createToaster({
		placement: 'bottom-end',
	});

	return (
		<>
			
			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						
					
				)}
			
		
	);
}

```

## Meta

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

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';

export default function Meta() {
	const toaster = createToaster({});

	return (
		<>
			
			
				{(toast) => (
					
						{toast.meta!.icon}
						
							{toast.title}
							{toast.description}
						
						
					
				)}
			
		
	);
}

```

## Promise

Use promises for asynchronous triggers.

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Promise_() {
	const toaster = createToaster({});

	function generatePositiveNumber() {
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				const number = Math.random() - 0.5;
				if (number > 0) {
					resolve(number);
				} else {
					reject(number);
				}
			}, 2000);
		});
	}

	return (
		<>
			

			
				{(toast) => (
					
						
							{toast.title}
							{toast.description}
						
						
					
				)}
			
		
	);
}

```

## API Reference

### ToastRootProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| toast    | -       | Omit\, "id" \| "parent">                         | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ToastRootContextProps

| Property | Default | Type                                            | Description |
| -------- | ------- | ----------------------------------------------- | ----------- |
| children | -       | (toast: ToastApi\) => ReactNode | -           |

### ToastGroupProps

| Property  | Default | Type                                                           | Description                 |
| --------- | ------- | -------------------------------------------------------------- | --------------------------- |
| toaster   | -       | ToastStore\                                               | -                           |
| children? | -       | ((toast: ToastProps\) => Element \| null) \| undefined    | -                           |
| element?  | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ToastMessageProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ToastTitleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ToastDescriptionProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ToastActionTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### ToastCloseTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |


# Tooltip

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

```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		
			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.

```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Arrow() {
	return (
		
			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.

```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function ZIndex() {
	return (
		
			
				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.

```tsx
import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-react';

export default function Programmatic() {
	const tooltip = useTooltip();
	return (
		
			

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

```

## Direction

```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		
			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
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Headless() {
	return (
		
			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                                                                                                                     |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| children?           | -       | ReactNode                                                                                        | -                                                                                                                               |
| 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.                                      |

### TooltipRootProviderProps

| Property  | Default | Type                   | Description |
| --------- | ------- | ---------------------- | ----------- |
| value     | -       | TooltipApi\ | -           |
| children? | -       | ReactNode              | -           |

### TooltipRootContextProps

| Property | Default | Type                                           | Description |
| -------- | ------- | ---------------------------------------------- | ----------- |
| children | -       | (tooltip: TooltipApi\) => ReactNode | -           |

### TooltipTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TooltipPositionerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TooltipContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TooltipArrowProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TooltipArrowTipProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |


# Tree View

Used to display hierarchical data.

```tsx
import { TreeView, createTreeViewCollection } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		
			{props.node.children ? (
				
					
						
						
							
							{props.node.name}
						
					
					
						
						{props.node.children.map((childNode, childIndex) => (
							
						))}
					
				
			) : (
				
					
					{props.node.name}
				
			)}
		
	);
}

export default function Default() {
	const collection = createTreeViewCollection({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});
	return (
		
			File System
			
				{collection.rootNode.children?.map((node, index) => (
					
				))}
			
		
	);
}

```

## Multiple Selection

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

```tsx
import { TreeView, createTreeViewCollection } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		
			{props.node.children ? (
				
					
						
						
							
							{props.node.name}
						
					
					
						
						{props.node.children.map((childNode, childIndex) => (
							
						))}
					
				
			) : (
				
					
					{props.node.name}
				
			)}
		
	);
}

export default function MultipleSelection() {
	const collection = createTreeViewCollection({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});
	return (
		
			File System
			
				{collection.rootNode.children?.map((node, index) => (
					
				))}
			
		
	);
}

```

## 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.

```tsx
import { TreeView, createTreeViewCollection, useTreeView } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		
			{props.node.children ? (
				
					
						
						
							
							{props.node.name}
						
					
					
						
						{props.node.children.map((childNode, childIndex) => (
							
						))}
					
				
			) : (
				
					
					{props.node.name}
				
			)}
		
	);
}

export default function CollapseExpand() {
	const collection = createTreeViewCollection({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});

	const treeView = useTreeView({
		collection: collection,
	});

	return (
		
			
				File System
				
					{collection.rootNode.children?.map((node, index) => (
						
					))}
				
			

			
				
				
			
		
	);
}

```

## Lazy Loading

```tsx
import { TreeView, createTreeViewCollection, type TreeViewRootProps } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon, LoaderIcon } from 'lucide-react';
import { useState } from 'react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
	childrenCount?: number;
}

const response: Record = {
	node_modules: [
		{
			id: 'node_modules/@skeletonlabs',
			name: '@skeletonlabs',
			childrenCount: 3,
		},
	],
	'node_modules/@skeletonlabs': [
		{
			id: 'node_modules/@skeletonlabs/skeleton',
			name: 'skeleton',
		},
		{
			id: 'node_modules/@skeletonlabs/skeleton-react',
			name: 'skeleton-react',
		},
		{
			id: 'node_modules/@skeletonlabs/skeleton-svelte',
			name: 'skeleton-svelte',
		},
	],
};

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		
			{props.node.children || props.node.childrenCount ? (
				
					
						
						
							
						
						
							
							{props.node.name}
						
					
					
						
						{props.node.children?.map((childNode, childIndex) => (
							
						))}
					
				
			) : (
				
					
					{props.node.name}
				
			)}
		
	);
}

export default function LazyLoading() {
	const [collection, setCollection] = useState(
		createTreeViewCollection({
			nodeToValue: (node) => node.id,
			nodeToString: (node) => node.name,
			rootNode: {
				id: 'root',
				name: '',
				children: [
					{
						id: 'node_modules',
						name: 'node_modules',
						childrenCount: 1,
					},
					{
						id: 'package.json',
						name: 'package.json',
					},
				],
			},
		}),
	);

	const loadChildren: TreeViewRootProps['loadChildren'] = async (details) => {
		await new Promise((resolve) => setTimeout(resolve, 1000));
		return response[details.node.id] || [];
	};

	const onLoadChildrenComplete: TreeViewRootProps['onLoadChildrenComplete'] = (details) => {
		setCollection(details.collection);
	};

	return (
		
			File System
			
				{collection.rootNode.children?.map((node, index) => (
					
				))}
			
		
	);
}

```

## 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?                | -        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                          | Render the element yourself                                                                                                                 |

### TreeViewRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | TreeViewApi\                                   | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewRootContextProps

| Property | Default | Type                                                  | Description |
| -------- | ------- | ----------------------------------------------------- | ----------- |
| children | -       | (treeView: TreeViewApi\) => ReactNode | -           |

### TreeViewTreeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewLabelProps

| Property | Default | Type                                                          | Description                 |
| -------- | ------- | ------------------------------------------------------------- | --------------------------- |
| level?   | -       | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined                       | The level of the heading.   |
| element? | -       | ((attributes: HTMLAttributes\<"h3">) => Element) \| undefined | Render the element yourself |

### TreeViewNodeProviderProps

| Property  | Default | Type      | Description |
| --------- | ------- | --------- | ----------- |
| value     | -       | NodeProps | -           |
| children? | -       | ReactNode | -           |

### TreeViewBranchProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewBranchControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewBranchTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TreeViewBranchIndicatorProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TreeViewBranchContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewBranchIndentGuideProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TreeViewItemProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| 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
```

## Next.js Integration

Shiki provides [official documentation](https://shiki.style/packages/next) for integrating into Next.js. This guide will follow this outline.

## 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/components/code-block.tsx`.
2. Implement several variations of our `` component in any route `page.tsx`.

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.

## 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 React](https://lucide.dev/guide/packages/lucide-react).

## Usage

```tsx
import { SkullIcon } from 'lucide-react';

const App = () => {
	return ;
};

export default App;
```

## Alternatives

* [Radix Icons](https://www.radix-ui.com/icons) - features modern styles and a large selection, supports React only.
* [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.
* [HeroIcons](https://heroicons.com/) - from the makers of Tailwind CSS, supports React and Vue.
* [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}