Components

• Accordion — (Outline, Contents)
• Alert Dialog — (Outline, Contents)
• Autocomplete — (Outline, Contents)
• Avatar — (Outline, Contents)
• Button — (Outline, Contents)
• Checkbox — (Outline, Contents)
• Checkbox Group — (Outline, Contents)
• Collapsible — (Outline, Contents)
• Combobox — (Outline, Contents)
• Context Menu — (Outline, Contents)
• Dialog — (Outline, Contents)
• Drawer — (Outline, Contents)
• Field — (Outline, Contents)
• Fieldset — (Outline, Contents)
• Form — (Outline, Contents)
• Input — (Outline, Contents)
• Menu — (Outline, Contents)
• Menubar — (Outline, Contents)
• Meter — (Outline, Contents)
• Navigation Menu — (Outline, Contents)
• Number Field — (Outline, Contents)
• OTP Field — (Outline, Contents)
• Popover — (Outline, Contents)
• Preview Card — (Outline, Contents)
• Progress — (Outline, Contents)
• Radio Group — (Outline, Contents)
• Scroll Area — (Outline, Contents)
• Select — (Outline, Contents)
• Separator — (Outline, Contents)
• Slider — (Outline, Contents)
• Switch — (Outline, Contents)
• Tabs — (Outline, Contents)
• Toast — (Outline, Contents)
• Toggle — (Outline, Contents)
• Toggle Group — (Outline, Contents)
• Toolbar — (Outline, Contents)
• Tooltip — (Outline, Contents)
• Textarea [New] — (Outline, Contents)

Accordion

A set of collapsible panels with headings.

Outline

• Sections:
  • Anatomy
  • Examples
    • Open multiple panels
    • Hidden until found
  • API reference
    • Root
    • Item
    • Header
    • Trigger
    • Panel
• Exports:
  • Accordion — Root
    • Props: defaultValue, disabled, hiddenUntilFound, keepMounted, loopFocus, multiple, onValueChange, orientation, render, value
    • Data Attributes: data-disabled, data-orientation
  • Accordion — Trigger
    • Props: disabled, nativeButton, onclick, render
    • Data Attributes: data-disabled, data-index, data-panel-open
  • Accordion — Item
    • Props: disabled, onOpenChange, render, value
    • Data Attributes: data-disabled, data-index, data-open
  • Accordion — Header
    • Props: render
    • Data Attributes: data-disabled, data-index, data-open
  • Accordion — Panel
    • Props: hiddenUntilFound, keepMounted, render
    • Data Attributes: data-disabled, data-ending-style, data-index, data-open, data-orientation, data-starting-style
    • CSS Variables: --accordion-panel-height, --accordion-panel-width
• Types: Accordion.Header.Props, Accordion.Header.State, Accordion.Item.Props, Accordion.Item.State, Accordion.Panel.Props, Accordion.Panel.State, Accordion.Root.Props, Accordion.Root.State, Accordion.Trigger.Props, Accordion.Trigger.State

Read more

Alert Dialog

A dialog that requires a user response to proceed.

Outline

• Sections:
  • Anatomy
  • Examples
    • Open from a menu
    • Close confirmation
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
  • API reference
    • Root
    • Trigger
    • Portal
    • Backdrop
    • Viewport
    • Popup
    • Title
    • Description
    • Close
  • createHandle
    • Handle
• Exports:
  • Alert Dialog — Root
    • Props: children, defaultOpen, defaultTriggerId, handle, onOpenChange, onOpenChangeComplete, open, triggerId
  • Alert Dialog — Trigger
    • Props: handle, id, nativeButton, payload, render
    • Data Attributes: data-disabled, data-popup-open
  • Alert Dialog — Portal
    • Props: container, keepMounted, render
  • Alert Dialog — Backdrop
    • Props: forceRender, render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Alert Dialog — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
    • CSS Variables: --nested-dialogs
  • Alert Dialog — Title
    • Props: render
  • Alert Dialog — Description
    • Props: render
  • Alert Dialog — Close
    • Props: nativeButton, render
    • Data Attributes: data-disabled
  • Alert Dialog — Viewport
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
• Types: AlertDialog.Backdrop.Props, AlertDialog.Backdrop.State, AlertDialog.Close.Props, AlertDialog.Close.State, AlertDialog.Description.Props, AlertDialog.Description.State, AlertDialog.Popup.Props, AlertDialog.Popup.State, AlertDialog.Portal.Props, AlertDialog.Portal.State, AlertDialog.Root.Props, AlertDialog.Root.State, AlertDialog.Title.Props, AlertDialog.Title.State, AlertDialog.Trigger.Props, AlertDialog.Trigger.State, AlertDialog.Viewport.Props, AlertDialog.Viewport.State

Read more

Autocomplete

An input that suggests options as you type.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Item values
  • Examples
    • Async search
    • Inline autocomplete
    • Grouped
    • Fuzzy matching
    • Limit results
    • Auto highlight
    • Command palette
    • Grid layout
    • Virtualized
      • Memoizing items
  • API reference
    • Root
    • Value
    • Input
    • InputGroup
    • Trigger
    • Icon
    • Clear
    • List
    • Portal
    • Backdrop
    • Positioner
    • Popup
    • Arrow
    • Status
    • Empty
    • Collection
    • Row
    • Item
    • Group
    • GroupLabel
    • Separator
  • useFilter
  • useFilteredItems
• Exports:
  • Autocomplete — Root
    • Props: autoHighlight, defaultOpen, defaultValue, disabled, filter, filteredItems, form, grid, highlightItemOnHover, id, inline, itemToStringValue, items, keepHighlight, limit, locale, loopFocus, modal, mode, name, onItemHighlighted, onOpenChange, onOpenChangeComplete, onValueChange, open, openOnInputClick, readonly, required, submitOnItemClick, value, virtualized
  • Autocomplete — Trigger
    • Props: disabled, id, nativeButton, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-popup-open, data-popup-side, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Autocomplete — Value
    • Props: children
  • Autocomplete — Input
    • Props: disabled, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-popup-open, data-popup-side, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Autocomplete — Icon
    • Props: render
  • Autocomplete — Clear
    • Props: disabled, keepMounted, nativeButton, render
    • Data Attributes: data-disabled, data-ending-style, data-popup-open, data-starting-style, data-visible
  • Autocomplete — List
    • Props: children, render
  • Autocomplete — Portal
    • Props: container, keepMounted, render
  • Autocomplete — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Autocomplete — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-empty, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --transform-origin
  • Autocomplete — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-empty, data-ending-style, data-open, data-side, data-starting-style
  • Autocomplete — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Autocomplete — Item
    • Props: disabled, index, nativeButton, render, value
    • Data Attributes: data-disabled, data-highlighted
  • Autocomplete — Group
    • Props: items, render
  • Autocomplete — GroupLabel
    • Props: render
  • Autocomplete — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Autocomplete — Status
    • Props: render
  • Autocomplete — Empty
    • Props: children, render
  • Autocomplete — Collection
    • Props: children
  • Autocomplete — Row
    • Props: render
  • Autocomplete — InputGroup
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-popup-open, data-popup-side, data-pressed, data-readonly, data-touched, data-valid
• Types: Autocomplete.Arrow.Props, Autocomplete.Arrow.State, Autocomplete.Backdrop.Props, Autocomplete.Backdrop.State, Autocomplete.Clear.Props, Autocomplete.Clear.State, Autocomplete.Collection.Props, Autocomplete.Collection.State, Autocomplete.Empty.Props, Autocomplete.Empty.State, Autocomplete.Group.Props, Autocomplete.Group.State, Autocomplete.GroupLabel.Props, Autocomplete.GroupLabel.State, Autocomplete.Icon.Props, Autocomplete.Icon.State, Autocomplete.Input.Props, Autocomplete.Input.State, Autocomplete.InputGroup.Props, Autocomplete.InputGroup.State, Autocomplete.Item.Props, Autocomplete.Item.State, Autocomplete.List.Props, Autocomplete.List.State, Autocomplete.Popup.Props, Autocomplete.Popup.State, Autocomplete.Portal.Props, Autocomplete.Portal.State, Autocomplete.Positioner.Props, Autocomplete.Positioner.State, Autocomplete.Root.Props, Autocomplete.Root.State, Autocomplete.Row.Props, Autocomplete.Row.State, Autocomplete.Separator.Props, Autocomplete.Separator.State, Autocomplete.Status.Props, Autocomplete.Status.State, Autocomplete.Trigger.Props, Autocomplete.Trigger.State, Autocomplete.Value.Props, Autocomplete.Value.State

Read more

Avatar

An easily stylable avatar component.

Outline

• Sections:
  • Anatomy
  • Optimized and lazy-loaded images
    • Stacking
    • Server rendering
  • API reference
    • Root
    • Image
    • Fallback
  • Additional types
• Exports:
  • Avatar — Root
    • Props: render
  • Avatar — Image
    • Props: keepMounted, onLoadingStatusChange, render
    • Data Attributes: data-ending-style, data-error, data-loading, data-starting-style
  • Avatar — Fallback
    • Props: delay, render
• Types: Avatar.Fallback.Props, Avatar.Fallback.State, Avatar.Image.Props, Avatar.Image.State, Avatar.Root.Props, Avatar.Root.State

Read more

Button

A button component that can be rendered as another tag or focusable when disabled.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Rendering as another tag
    • Rendering links as buttons
    • Loading states
  • API reference
• Exports:
  • Button
    • Props: disabled, focusableWhenDisabled, nativeButton, onclick, render
    • Data Attributes: data-disabled
• Types: Button.Props, Button.State

Read more

Checkbox

An easily stylable checkbox component.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling a checkbox
    • Using a sibling label
    • Native attributes and events
    • Form integration
  • API reference
    • Root
    • Indicator
• Exports:
  • Checkbox — Root
    • Props: checked, class, defaultChecked, disabled, form, host, id, indeterminate, name, parent, readonly, render, required, style, type, uncheckedValue, value
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-indeterminate, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid
  • Checkbox — Indicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-dirty, data-disabled, data-ending-style, data-filled, data-focused, data-indeterminate, data-invalid, data-readonly, data-required, data-starting-style, data-touched, data-unchecked, data-valid
• Types: Checkbox.Indicator.Props, Checkbox.Indicator.State, Checkbox.Root.Props, Checkbox.Root.State

Read more

Checkbox Group

Provides shared state to a series of checkboxes.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling a checkbox group
    • Using sibling labels
    • Submitting a plain form
    • Form integration
    • Parent checkbox
    • Nested parent checkbox
  • API reference
• Exports:
  • CheckboxGroup
    • Props: allValues, defaultValue, disabled, name, render, value
    • Data Attributes: data-disabled
• Types: CheckboxGroup.Props, CheckboxGroup.State

Read more

Collapsible

A collapsible panel controlled by a button.

Outline

• Sections:
  • Anatomy
  • Examples
    • Hidden until found
  • API reference
    • Root
    • Trigger
    • Panel
• Exports:
  • Collapsible — Root
    • Props: defaultOpen, disabled, onOpenChange, open, render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Collapsible — Trigger
    • Props: disabled, nativeButton, onclick, render
    • Data Attributes: data-panel-open
  • Collapsible — Panel
    • Props: hiddenUntilFound, keepMounted, render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
    • CSS Variables: --collapsible-panel-height, --collapsible-panel-width
• Types: Collapsible.Panel.Props, Collapsible.Panel.State, Collapsible.Root.Props, Collapsible.Root.State, Collapsible.Trigger.Props, Collapsible.Trigger.State

Read more

Combobox

An input combined with a list of predefined items to select.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Item values
  • Examples
    • Typed wrapper component
    • Value selection with IDs
    • Multiple select
      • Keeping the filter after selection
    • Input inside popup
    • Grouped
    • Async search (single)
    • Async search (multiple)
    • Creatable
    • Virtualized
      • Memoizing items
  • API reference
    • Root
    • Label
    • Value
    • Icon
    • Input
    • InputGroup
    • Clear
    • Trigger
    • Chips
    • Chip
    • ChipRemove
    • List
    • Portal
    • Backdrop
    • Positioner
    • Popup
    • Arrow
    • Status
    • Empty
    • Collection
    • Row
    • Item
    • ItemIndicator
    • Group
    • GroupLabel
    • Separator
  • useFilter
  • useFilteredItems
  • createItems
• Exports:
  • Combobox — Root
    • Props: autoHighlight, autocomplete, defaultInputValue, defaultOpen, defaultValue, disabled, filter, filteredItems, form, grid, highlightItemOnHover, id, inline, inputValue, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, limit, locale, loopFocus, modal, multiple, name, onInputValueChange, onItemHighlighted, onOpenChange, onOpenChangeComplete, onValueChange, open, openOnInputClick, readonly, required, value, virtualized
  • Combobox — Trigger
    • Props: disabled, id, nativeButton, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-placeholder, data-popup-open, data-popup-side, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Combobox — Value
    • Props: children, placeholder
  • Combobox — Input
    • Props: disabled, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-popup-open, data-popup-side, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Combobox — Icon
    • Props: render
  • Combobox — Clear
    • Props: disabled, keepMounted, nativeButton, render
    • Data Attributes: data-disabled, data-ending-style, data-popup-open, data-starting-style, data-visible
  • Combobox — List
    • Props: children, render
  • Combobox — Portal
    • Props: container, keepMounted, render
  • Combobox — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Combobox — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-empty, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --transform-origin
  • Combobox — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-empty, data-ending-style, data-open, data-side, data-starting-style
  • Combobox — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Combobox — Item
    • Props: disabled, index, nativeButton, render, value
    • Data Attributes: data-disabled, data-highlighted, data-selected
  • Combobox — Group
    • Props: items, render
  • Combobox — GroupLabel
    • Props: render
  • Combobox — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Combobox — Label
    • Props: render
  • Combobox — Status
    • Props: render
  • Combobox — Empty
    • Props: children, render
  • Combobox — Collection
    • Props: children
  • Combobox — Row
    • Props: render
  • Combobox — Chips
    • Props: render
  • Combobox — Chip
    • Props: render
  • Combobox — ChipRemove
    • Props: disabled, nativeButton, render
  • Combobox — ItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-ending-style, data-starting-style
  • Combobox — InputGroup
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-list-empty, data-placeholder, data-popup-open, data-popup-side, data-pressed, data-readonly, data-touched, data-valid
• Types: Combobox.Arrow.Props, Combobox.Arrow.State, Combobox.Backdrop.Props, Combobox.Backdrop.State, Combobox.Chip.Props, Combobox.Chip.State, Combobox.ChipRemove.Props, Combobox.ChipRemove.State, Combobox.Chips.Props, Combobox.Chips.State, Combobox.Clear.Props, Combobox.Clear.State, Combobox.Collection.Props, Combobox.Collection.State, Combobox.Empty.Props, Combobox.Empty.State, Combobox.Group.Props, Combobox.Group.State, Combobox.GroupLabel.Props, Combobox.GroupLabel.State, Combobox.Icon.Props, Combobox.Icon.State, Combobox.Input.Props, Combobox.Input.State, Combobox.InputGroup.Props, Combobox.InputGroup.State, Combobox.Item.Props, Combobox.Item.State, Combobox.ItemIndicator.Props, Combobox.ItemIndicator.State, Combobox.Label.Props, Combobox.Label.State, Combobox.List.Props, Combobox.List.State, Combobox.Popup.Props, Combobox.Popup.State, Combobox.Portal.Props, Combobox.Portal.State, Combobox.Positioner.Props, Combobox.Positioner.State, Combobox.Root.Props, Combobox.Root.State, Combobox.Row.Props, Combobox.Row.State, Combobox.Separator.Props, Combobox.Separator.State, Combobox.Status.Props, Combobox.Status.State, Combobox.Trigger.Props, Combobox.Trigger.State, Combobox.Value.Props, Combobox.Value.State

Read more

Context Menu

A menu that appears at the pointer on right click or long press.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Using with Menu
    • Nested menu
  • API reference
    • Root
    • Trigger
    • Portal
    • Backdrop
    • Positioner
    • Popup
    • Arrow
    • Item
    • LinkItem
    • SubmenuRoot
    • SubmenuTrigger
    • Group
    • GroupLabel
    • RadioGroup
    • RadioItem
    • RadioItemIndicator
    • CheckboxItem
    • CheckboxItemIndicator
    • Separator
• Exports:
  • Context Menu — Root
    • Props: defaultOpen, disabled, highlightItemOnHover, loopFocus, onItemHighlighted, onOpenChange, onOpenChangeComplete, open, orientation
  • Context Menu — Trigger
    • Props: render
    • Data Attributes: data-popup-open, data-pressed
  • Context Menu — Portal
    • Props: container, keepMounted, render
  • Context Menu — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Context Menu — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Context Menu — Popup
    • Props: finalFocus, render
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Context Menu — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Context Menu — Item
    • Props: closeOnClick, disabled, id, label, nativeButton, render
    • Data Attributes: data-disabled, data-highlighted
  • Context Menu — Group
    • Props: render
  • Context Menu — GroupLabel
    • Props: render
  • Context Menu — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Context Menu — SubmenuRoot
    • Props: closeParentOnEsc, defaultOpen, disabled, highlightItemOnHover, loopFocus, onItemHighlighted, onOpenChange, onOpenChangeComplete, open, orientation
  • Context Menu — SubmenuTrigger
    • Props: closeDelay, delay, disabled, id, label, nativeButton, openOnHover, render
    • Data Attributes: data-disabled, data-highlighted, data-popup-open
  • Context Menu — RadioGroup
    • Props: defaultValue, disabled, onValueChange, render, value
  • Context Menu — RadioItem
    • Props: closeOnClick, disabled, id, label, nativeButton, render, value
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Context Menu — RadioItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Context Menu — CheckboxItem
    • Props: checked, closeOnClick, defaultChecked, disabled, id, label, nativeButton, onCheckedChange, render
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Context Menu — CheckboxItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Context Menu — LinkItem
    • Props: closeOnClick, id, label, render
    • Data Attributes: data-highlighted
• Types: ContextMenu.Arrow.Props, ContextMenu.Arrow.State, ContextMenu.Backdrop.Props, ContextMenu.Backdrop.State, ContextMenu.CheckboxItem.Props, ContextMenu.CheckboxItem.State, ContextMenu.CheckboxItemIndicator.Props, ContextMenu.CheckboxItemIndicator.State, ContextMenu.Group.Props, ContextMenu.Group.State, ContextMenu.GroupLabel.Props, ContextMenu.GroupLabel.State, ContextMenu.Item.Props, ContextMenu.Item.State, ContextMenu.LinkItem.Props, ContextMenu.LinkItem.State, ContextMenu.Popup.Props, ContextMenu.Popup.State, ContextMenu.Portal.Props, ContextMenu.Portal.State, ContextMenu.Positioner.Props, ContextMenu.Positioner.State, ContextMenu.RadioGroup.Props, ContextMenu.RadioGroup.State, ContextMenu.RadioItem.Props, ContextMenu.RadioItem.State, ContextMenu.RadioItemIndicator.Props, ContextMenu.RadioItemIndicator.State, ContextMenu.Root.Props, ContextMenu.Root.State, ContextMenu.Separator.Props, ContextMenu.Separator.State, ContextMenu.SubmenuRoot.Props, ContextMenu.SubmenuRoot.State, ContextMenu.SubmenuTrigger.Props, ContextMenu.SubmenuTrigger.State, ContextMenu.Trigger.Props, ContextMenu.Trigger.State

Read more

Dialog

A popup that opens on top of the entire page.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • State
    • Open from a menu
    • Nested dialogs
    • Close confirmation
    • Custom focus management
    • Outside scroll dialog
    • Inside scroll dialog
    • Placing elements outside the popup
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
  • API reference
    • Root
    • Trigger
    • Portal
    • Backdrop
    • Viewport
    • Popup
    • Title
    • Description
    • Close
  • createHandle
    • Handle
• Exports:
  • Dialog — Root
    • Props: children, defaultOpen, defaultTriggerId, disablePointerDismissal, handle, modal, onOpenChange, onOpenChangeComplete, open, triggerId
  • Dialog — Trigger
    • Props: handle, id, nativeButton, payload, render
    • Data Attributes: data-disabled, data-popup-open
  • Dialog — Portal
    • Props: container, keepMounted, render
  • Dialog — Backdrop
    • Props: forceRender, render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Dialog — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
    • CSS Variables: --nested-dialogs
  • Dialog — Title
    • Props: render
  • Dialog — Description
    • Props: render
  • Dialog — Close
    • Props: nativeButton, render
    • Data Attributes: data-disabled
  • Dialog — Viewport
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
• Types: Dialog.Backdrop.Props, Dialog.Backdrop.State, Dialog.Close.Props, Dialog.Close.State, Dialog.Description.Props, Dialog.Description.State, Dialog.Popup.Props, Dialog.Popup.State, Dialog.Portal.Props, Dialog.Portal.State, Dialog.Root.Props, Dialog.Root.State, Dialog.Title.Props, Dialog.Title.State, Dialog.Trigger.Props, Dialog.Trigger.State, Dialog.Viewport.Props, Dialog.Viewport.State

Read more

Drawer

A panel that slides in from the edge of the screen.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • State
    • Position
    • Nested drawers
    • Snap points
    • Virtual keyboard aware
    • Indent effect
    • Non-modal
    • Mobile navigation
    • Swipe to open
    • Close confirmation
    • Action sheet with separate destructive action
    • Detached triggers
    • Stacking and animations
  • API reference
    • Provider
    • IndentBackground
    • Indent
    • Root
    • Trigger
    • SwipeArea
    • VirtualKeyboardProvider
    • Portal
    • Backdrop
    • Viewport
    • Popup
    • Content
    • Title
    • Description
    • Close
  • createHandle
    • Handle
• Exports:
  • Drawer — Root
    • Props: children, defaultOpen, defaultSnapPoint, defaultTriggerId, disablePointerDismissal, handle, modal, onOpenChange, onOpenChangeComplete, onSnapPointChange, open, snapPoint, snapPoints, snapToSequentialPoints, swipeDirection, triggerId
  • Drawer — Provider
  • Drawer — Trigger
    • Props: handle, id, nativeButton, payload, render
    • Data Attributes: data-disabled, data-popup-open
  • Drawer — Portal
    • Props: container, keepMounted, render
  • Drawer — Backdrop
    • Props: forceRender, render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
    • CSS Variables: --drawer-swipe-progress
  • Drawer — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-closed, data-ending-style, data-expanded, data-nested-drawer-open, data-nested-drawer-swiping, data-open, data-starting-style, data-swipe-direction, data-swipe-dismiss, data-swiping
    • CSS Variables: --drawer-frontmost-height, --drawer-height, --drawer-snap-point-offset, --drawer-swipe-movement-x, --drawer-swipe-movement-y, --drawer-swipe-strength, --nested-drawers
  • Drawer — Content
    • Props: render
  • Drawer — Title
    • Props: render
  • Drawer — Description
    • Props: render
  • Drawer — Close
    • Props: nativeButton, render
    • Data Attributes: data-disabled
  • Drawer — Viewport
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-nested, data-open, data-starting-style
    • CSS Variables: --drawer-keyboard-inset
  • Drawer — Indent
    • Props: render
  • Drawer — IndentBackground
    • Props: render
  • Drawer — SwipeArea
    • Props: disabled, render, swipeDirection
    • Data Attributes: data-closed, data-disabled, data-open, data-swipe-direction, data-swiping
  • Drawer — VirtualKeyboardProvider
• Types: Drawer.Backdrop.Props, Drawer.Backdrop.State, Drawer.Close.Props, Drawer.Close.State, Drawer.Content.Props, Drawer.Content.State, Drawer.Description.Props, Drawer.Description.State, Drawer.Indent.Props, Drawer.Indent.State, Drawer.IndentBackground.Props, Drawer.IndentBackground.State, Drawer.Popup.Props, Drawer.Popup.State, Drawer.Portal.Props, Drawer.Portal.State, Drawer.Provider.Props, Drawer.Provider.State, Drawer.Root.Props, Drawer.Root.State, Drawer.SwipeArea.Props, Drawer.SwipeArea.State, Drawer.Title.Props, Drawer.Title.State, Drawer.Trigger.Props, Drawer.Trigger.State, Drawer.Viewport.Props, Drawer.Viewport.State, Drawer.VirtualKeyboardProvider.Props, Drawer.VirtualKeyboardProvider.State

Read more

Field

A component that provides labeling and validation for form controls.

Outline

• Sections:
  • Anatomy
  • API reference
    • Root
    • Label
    • Control
    • Description
    • Item
    • Error
    • Validity
• Exports:
  • Field — Root
    • Props: dirty, disabled, invalid, name, render, touched, validate, validationDebounceTime, validationMode
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Item
    • Props: disabled, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Description
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Control
    • Props: defaultValue, render, value
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Label
    • Props: nativeLabel, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Error
    • Props: children, match, render
    • Data Attributes: data-dirty, data-disabled, data-ending-style, data-filled, data-focused, data-invalid, data-starting-style, data-touched, data-valid
  • Field — Validity
    • Props: children
• Types: Field.Control.Props, Field.Control.State, Field.Description.Props, Field.Description.State, Field.Error.Props, Field.Error.State, Field.Item.Props, Field.Item.State, Field.Label.Props, Field.Label.State, Field.Root.Props, Field.Root.State, Field.Validity.Props, Field.Validity.State

Read more

Fieldset

A native fieldset element with an easily stylable legend.

Outline

• Sections:
  • Anatomy
  • API reference
    • Root
    • Legend
• Exports:
  • Fieldset — Root
    • Props: disabled, render
  • Fieldset — Legend
    • Props: render
    • Data Attributes: data-disabled
• Types: Fieldset.Legend.Props, Fieldset.Legend.State, Fieldset.Root.Props, Fieldset.Root.State

Read more

Form

A native form element with consolidated error handling.

Outline

• Sections:
  • Anatomy
  • Examples
    • Submit with a SvelteKit remote form
    • Submit with a form action
    • Validate before the submit
    • Using with Zod
  • API reference
• Exports:
  • Form — Error
    • Props: children, match, render
  • Form
    • Props: action, errors, form, method, novalidate, onsubmit, render, validationDebounceTime, validationMode, values
• Types: Form.Error.Props, Form.Error.State, Form.Props, Form.State

Read more

Input

A native input element that automatically works with Field.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
• Exports:
  • Input
    • Props: defaultValue, render, value
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
• Types: Input.Props, Input.State

Read more

Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

Outline

• Sections:
  • Anatomy
  • Examples
    • Open on hover
    • Checkbox items
    • Radio items
    • Close on click
    • Group labels
    • Nested menu
    • Navigate to another page
    • Open a dialog
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Arrow
    • Animating the Menu
      • Position and Size
      • Content
    • Filtering [Preview]
      • Matching items
      • Controlling the query
      • Highlighting
      • Focus and keyboard
      • Submenus
      • Filtering with detached triggers
  • API reference
    • FilterProvider [Preview]
    • Root
    • Trigger
    • Portal
    • Backdrop
    • Positioner
    • Popup
    • Viewport
    • Arrow
    • Input
    • Clear
    • Empty
    • List
    • Item
    • LinkItem
    • SubmenuRoot
    • SubmenuTrigger
    • Group
    • GroupLabel
    • RadioGroup
    • RadioItem
    • RadioItemIndicator
    • CheckboxItem
    • CheckboxItemIndicator
    • Separator
  • useFilter
  • createHandle
    • Handle
• Exports:
  • Menu — Root
    • Props: children, closeParentOnEsc, defaultOpen, defaultTriggerId, disabled, handle, highlightItemOnHover, loopFocus, modal, onItemHighlighted, onOpenChange, onOpenChangeComplete, open, orientation, triggerId
  • Menu — Trigger
    • Props: closeDelay, delay, disabled, handle, id, nativeButton, openOnHover, payload, render
    • Data Attributes: data-disabled, data-popup-open, data-pressed
  • Menu — Input
    • Props: disabled, id, render
    • Data Attributes: data-highlighted
  • Menu — Clear
    • Props: disabled, nativeButton, render
    • Data Attributes: data-disabled
  • Menu — List
    • Props: render
  • Menu — Portal
    • Props: container, keepMounted, render
  • Menu — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Menu — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Menu — Popup
    • Props: finalFocus, render
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Menu — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Menu — Item
    • Props: closeOnClick, disabled, id, label, nativeButton, render
    • Data Attributes: data-disabled, data-highlighted
  • Menu — Viewport
    • Props: render
    • Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width
  • Menu — Group
    • Props: render
  • Menu — GroupLabel
    • Props: render
  • Menu — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Menu — Empty
    • Props: render
  • Menu — SubmenuRoot
    • Props: closeParentOnEsc, defaultOpen, disabled, highlightItemOnHover, loopFocus, onItemHighlighted, onOpenChange, onOpenChangeComplete, open, orientation
  • Menu — SubmenuTrigger
    • Props: closeDelay, delay, disabled, id, label, nativeButton, openOnHover, render
    • Data Attributes: data-disabled, data-highlighted, data-popup-open
  • Menu — RadioGroup
    • Props: defaultValue, disabled, onValueChange, render, value
  • Menu — RadioItem
    • Props: closeOnClick, disabled, id, label, nativeButton, render, value
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Menu — RadioItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Menu — CheckboxItem
    • Props: checked, closeOnClick, defaultChecked, disabled, id, label, nativeButton, onCheckedChange, render
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Menu — CheckboxItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Menu — FilterProvider
    • Props: autoHighlight, defaultValue, filter, locale, onValueChange, value
  • Menu — LinkItem
    • Props: closeOnClick, id, label, render
    • Data Attributes: data-highlighted
• Types: Menu.Arrow.Props, Menu.Arrow.State, Menu.Backdrop.Props, Menu.Backdrop.State, Menu.CheckboxItem.Props, Menu.CheckboxItem.State, Menu.CheckboxItemIndicator.Props, Menu.CheckboxItemIndicator.State, Menu.Clear.Props, Menu.Clear.State, Menu.Empty.Props, Menu.Empty.State, Menu.FilterProvider.Props, Menu.FilterProvider.State, Menu.Group.Props, Menu.Group.State, Menu.GroupLabel.Props, Menu.GroupLabel.State, Menu.Input.Props, Menu.Input.State, Menu.Item.Props, Menu.Item.State, Menu.LinkItem.Props, Menu.LinkItem.State, Menu.List.Props, Menu.List.State, Menu.Popup.Props, Menu.Popup.State, Menu.Portal.Props, Menu.Portal.State, Menu.Positioner.Props, Menu.Positioner.State, Menu.RadioGroup.Props, Menu.RadioGroup.State, Menu.RadioItem.Props, Menu.RadioItem.State, Menu.RadioItemIndicator.Props, Menu.RadioItemIndicator.State, Menu.Root.Props, Menu.Root.State, Menu.Separator.Props, Menu.Separator.State, Menu.SubmenuRoot.Props, Menu.SubmenuRoot.State, Menu.SubmenuTrigger.Props, Menu.SubmenuTrigger.State, Menu.Trigger.Props, Menu.Trigger.State, Menu.Viewport.Props, Menu.Viewport.State

Read more

Menubar

A menu bar providing commands and options for your application.

Outline

• Sections:
  • Anatomy
  • API reference
• Exports:
  • Menubar
    • Props: disabled, loopFocus, modal, orientation, render
    • Data Attributes: data-has-submenu-open, data-modal, data-orientation
• Types: Menubar.Props, Menubar.State

Read more

Meter

A graphical display of a numeric value within a range.

Outline

• Sections:
  • Anatomy
  • API reference
    • Root
    • Track
    • Indicator
    • Value
    • Label
• Exports:
  • Meter — Root
    • Props: aria-valuetext, format, getAriaValueText, locale, max, min, render, value
  • Meter — Value
    • Props: children, render
  • Meter — Indicator
    • Props: render
  • Meter — Track
    • Props: render
  • Meter — Label
    • Props: render
• Types: Meter.Indicator.Props, Meter.Indicator.State, Meter.Label.Props, Meter.Label.State, Meter.Root.Props, Meter.Root.State, Meter.Track.Props, Meter.Track.State, Meter.Value.Props, Meter.Value.State

Read more

Navigation Menu

A collection of links and menus for website navigation.

Outline

• Sections:
  • Anatomy
  • Examples
    • Nested submenus
    • Nested inline submenus
    • Custom links
    • Large menus
  • Closing animations
  • API reference
    • Root
    • List
    • Item
    • Trigger
    • Icon
    • Content
    • Link
    • Backdrop
    • Portal
    • Positioner
    • Popup
    • Viewport
    • Arrow
• Exports:
  • Navigation Menu — Root
    • Props: closeDelay, defaultValue, delay, onOpenChangeComplete, onValueChange, orientation, render, value
  • Navigation Menu — Trigger
    • Props: disabled, nativeButton, render
    • Data Attributes: data-disabled, data-popup-open, data-pressed
  • Navigation Menu — Icon
    • Props: children, render
    • Data Attributes: data-popup-open
  • Navigation Menu — List
    • Props: render
  • Navigation Menu — Portal
    • Props: container, keepMounted, render
  • Navigation Menu — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Navigation Menu — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-instant, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Navigation Menu — Popup
    • Props: render
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-ending-style, data-open, data-side, data-starting-style
    • CSS Variables: --popup-height, --popup-width
  • Navigation Menu — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Navigation Menu — Item
    • Props: render, value
  • Navigation Menu — Content
    • Props: keepMounted, render
    • Data Attributes: data-activation-direction, data-closed, data-ending-style, data-open, data-starting-style
  • Navigation Menu — Viewport
    • Props: render
  • Navigation Menu — Link
    • Props: active, closeOnClick, render
    • Data Attributes: data-active
• Types: NavigationMenu.Arrow.Props, NavigationMenu.Arrow.State, NavigationMenu.Backdrop.Props, NavigationMenu.Backdrop.State, NavigationMenu.Content.Props, NavigationMenu.Content.State, NavigationMenu.Icon.Props, NavigationMenu.Icon.State, NavigationMenu.Item.Props, NavigationMenu.Item.State, NavigationMenu.Link.Props, NavigationMenu.Link.State, NavigationMenu.List.Props, NavigationMenu.List.State, NavigationMenu.Popup.Props, NavigationMenu.Popup.State, NavigationMenu.Portal.Props, NavigationMenu.Portal.State, NavigationMenu.Positioner.Props, NavigationMenu.Positioner.State, NavigationMenu.Root.Props, NavigationMenu.Root.State, NavigationMenu.Trigger.Props, NavigationMenu.Trigger.State, NavigationMenu.Viewport.Props, NavigationMenu.Viewport.State

Read more

Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Native attributes and events
    • Form integration
  • API reference
    • Root
    • ScrubArea
    • ScrubAreaCursor
    • Group
    • Decrement
    • Input
    • Increment
• Exports:
  • Number Field — Root
    • Props: allowOutOfRange, allowWheelScrub, class, defaultValue, disabled, form, format, host, id, largeStep, locale, max, min, name, readonly, render, required, smallStep, snapOnStep, step, style, type, value
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — Input
    • Props: aria-roledescription, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — Group
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — ScrubArea
    • Props: direction, pixelSensitivity, render, teleportDistance
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — ScrubAreaCursor
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — Decrement
    • Props: nativeButton, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
  • Number Field — Increment
    • Props: nativeButton, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid
• Types: NumberField.Decrement.Props, NumberField.Decrement.State, NumberField.Group.Props, NumberField.Group.State, NumberField.Increment.Props, NumberField.Increment.State, NumberField.Input.Props, NumberField.Input.State, NumberField.Root.Props, NumberField.Root.State, NumberField.ScrubArea.Props, NumberField.ScrubArea.State, NumberField.ScrubAreaCursor.Props, NumberField.ScrubAreaCursor.State

Read more

OTP Field

A one-time password input composed of individual character slots.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling an OTP field
    • Form integration
    • Alphanumeric verification codes
    • Grouped layouts
    • Placeholder hints
    • Custom normalization
    • Masked entry
  • API reference
    • Root
    • Input
    • Separator
• Exports:
  • OTP Field — Root
    • Props: autoSubmit, autocomplete, defaultValue, disabled, form, id, inputmode, length, mask, name, normalizeValue, onValueChange, onValueComplete, onValueInvalid, readonly, render, required, validationType, value
    • Data Attributes: data-complete, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-valid
  • OTP Field — Input
    • Props: render
    • Data Attributes: data-complete, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-valid
  • OTP Field — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
• Types: OTPField.Input.Props, OTPField.Input.State, OTPField.Root.Props, OTPField.Root.State, OTPField.Separator.Props, OTPField.Separator.State

Read more

Popover

An accessible popup anchored to a button.

Outline

• Sections:
  • Anatomy
  • Examples
    • Opening on hover
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Animating the Popover
      • Position and Size
      • Content
  • API reference
    • Root
    • Trigger
    • Backdrop
    • Portal
    • Positioner
    • Popup
    • Arrow
    • Title
    • Description
    • Close
    • Viewport
  • createHandle
    • Handle
• Exports:
  • Popover — Root
    • Props: children, defaultOpen, defaultTriggerId, handle, modal, onOpenChange, onOpenChangeComplete, open, triggerId
  • Popover — Trigger
    • Props: closeDelay, delay, disabled, handle, id, nativeButton, openOnHover, payload, render
    • Data Attributes: data-disabled, data-popup-open, data-pressed
  • Popover — Portal
    • Props: container, keepMounted, render
  • Popover — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Popover — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Popover — Popup
    • Props: finalFocus, initialFocus, render
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
    • CSS Variables: --popup-height, --popup-width
  • Popover — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Popover — Title
    • Props: render
  • Popover — Description
    • Props: render
  • Popover — Close
    • Props: disabled, nativeButton, render
  • Popover — Viewport
    • Props: render
    • Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width
• Types: Popover.Arrow.Props, Popover.Arrow.State, Popover.Backdrop.Props, Popover.Backdrop.State, Popover.Close.Props, Popover.Close.State, Popover.Description.Props, Popover.Description.State, Popover.Popup.Props, Popover.Popup.State, Popover.Portal.Props, Popover.Portal.State, Popover.Positioner.Props, Popover.Positioner.State, Popover.Root.Props, Popover.Root.State, Popover.Title.Props, Popover.Title.State, Popover.Trigger.Props, Popover.Trigger.State, Popover.Viewport.Props, Popover.Viewport.State

Read more

Preview Card

A link that shows a destination preview without interrupting keyboard or screen reader navigation.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Animating the Preview Card
      • Position and Size
      • Content
  • API reference
    • Root
    • Trigger
    • Portal
    • Backdrop
    • Positioner
    • Popup
    • Viewport
    • Arrow
  • createHandle
    • Handle
• Exports:
  • Preview Card — Root
    • Props: children, defaultOpen, defaultTriggerId, handle, onOpenChange, onOpenChangeComplete, open, triggerId
  • Preview Card — Trigger
    • Props: closeDelay, delay, handle, id, payload, render
    • Data Attributes: data-popup-open
  • Preview Card — Portal
    • Props: container, keepMounted, render
  • Preview Card — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Preview Card — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Preview Card — Popup
    • Props: render
    • Data Attributes: data-align, data-closed, data-ending-style, data-open, data-side, data-starting-style
  • Preview Card — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Preview Card — Viewport
    • Props: render
    • Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width
• Types: PreviewCard.Arrow.Props, PreviewCard.Arrow.State, PreviewCard.Backdrop.Props, PreviewCard.Backdrop.State, PreviewCard.Popup.Props, PreviewCard.Popup.State, PreviewCard.Portal.Props, PreviewCard.Portal.State, PreviewCard.Positioner.Props, PreviewCard.Positioner.State, PreviewCard.Root.Props, PreviewCard.Root.State, PreviewCard.Trigger.Props, PreviewCard.Trigger.State, PreviewCard.Viewport.Props, PreviewCard.Viewport.State

Read more

Progress

Displays the status of a task that takes a long time.

Outline

• Sections:
  • Anatomy
  • API reference
    • Root
    • Track
    • Indicator
    • Value
    • Label
• Exports:
  • Progress — Root
    • Props: aria-valuetext, format, getAriaValueText, locale, max, min, render, value
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Value
    • Props: children, render
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Indicator
    • Props: render
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Track
    • Props: render
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Label
    • Props: render
    • Data Attributes: data-complete, data-indeterminate, data-progressing
• Types: Progress.Indicator.Props, Progress.Indicator.State, Progress.Label.Props, Progress.Label.State, Progress.Root.Props, Progress.Root.State, Progress.Track.Props, Progress.Track.State, Progress.Value.Props, Progress.Value.State

Read more

Radio Group

Provides shared state to a series of radio buttons.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling a radio group
    • Using sibling labels
    • Native attributes and events
    • Submitting a plain form
    • Form integration
  • API reference
    • RadioGroup
    • Root
    • Indicator
• Exports:
  • Radio Group — Root
    • Props: checked, class, defaultChecked, disabled, form, host, id, name, readonly, render, required, style, type, value
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid
  • Radio Group — Indicator
    • Props: keepMounted, render
    • Data Attributes: data-checked, data-dirty, data-disabled, data-ending-style, data-filled, data-focused, data-invalid, data-readonly, data-required, data-starting-style, data-touched, data-unchecked, data-valid
  • RadioGroup
    • Props: defaultValue, disabled, form, name, readonly, render, required, value
    • Data Attributes: data-disabled
• Types: Radio.Indicator.Props, Radio.Indicator.State, Radio.Root.Props, Radio.Root.State, RadioGroup.Props, RadioGroup.State

Read more

Scroll Area

A native scroll container with custom scrollbars.

Outline

• Sections:
  • Anatomy
  • Examples
    • Both scrollbars
    • Gradient scroll fade
    • Combining with Tabs
  • API reference
    • Root
    • Viewport
    • Content
    • Scrollbar
    • Thumb
    • Corner
• Exports:
  • Scroll Area — Root
    • Props: overflowEdgeThreshold, render
    • Data Attributes: data-has-overflow-x, data-has-overflow-y, data-overflow-x-end, data-overflow-x-start, data-overflow-y-end, data-overflow-y-start, data-scrolling
    • CSS Variables: --scroll-area-corner-height, --scroll-area-corner-width
  • Scroll Area — Content
    • Props: render
    • Data Attributes: data-has-overflow-x, data-has-overflow-y, data-overflow-x-end, data-overflow-x-start, data-overflow-y-end, data-overflow-y-start, data-scrolling
  • Scroll Area — Viewport
    • Props: render
    • Data Attributes: data-has-overflow-x, data-has-overflow-y, data-overflow-x-end, data-overflow-x-start, data-overflow-y-end, data-overflow-y-start, data-scrolling
    • CSS Variables: --scroll-area-overflow-x-end, --scroll-area-overflow-x-start, --scroll-area-overflow-y-end, --scroll-area-overflow-y-start
  • Scroll Area — Thumb
    • Props: render
    • Data Attributes: data-orientation, data-scrolling
  • Scroll Area — Scrollbar
    • Props: keepMounted, orientation, render
    • Data Attributes: data-has-overflow-x, data-has-overflow-y, data-hovering, data-orientation, data-overflow-x-end, data-overflow-x-start, data-overflow-y-end, data-overflow-y-start, data-scrolling
    • CSS Variables: --scroll-area-thumb-height, --scroll-area-thumb-width
  • Scroll Area — Corner
    • Props: render
• Types: ScrollArea.Content.Props, ScrollArea.Content.State, ScrollArea.Corner.Props, ScrollArea.Corner.State, ScrollArea.Root.Props, ScrollArea.Root.State, ScrollArea.Scrollbar.Props, ScrollArea.Scrollbar.State, ScrollArea.Thumb.Props, ScrollArea.Thumb.State, ScrollArea.Viewport.Props, ScrollArea.Viewport.State

Read more

Select

A common form component for choosing a predefined value in a dropdown menu.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Positioning
  • Examples
    • Typed wrapper component
    • Formatting the value
    • Labeling a select
    • Placeholder values
    • Multiple selection
    • Object values
    • Grouped
    • Native attributes and events
    • Form integration
  • API reference
    • Root
    • Label
    • Trigger
    • Value
    • Icon
    • Backdrop
    • Portal
    • Positioner
    • Popup
    • List
    • Arrow
    • Item
    • ItemText
    • ItemIndicator
    • Group
    • GroupLabel
    • ScrollUpArrow
    • ScrollDownArrow
    • Separator
• Exports:
  • Select — Root
    • Props: autocomplete, defaultOpen, defaultValue, disabled, form, highlightItemOnHover, id, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, modal, multiple, name, onOpenChange, onOpenChangeComplete, open, readonly, required, value
  • Select — Trigger
    • Props: disabled, id, nativeButton, render
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-placeholder, data-popup-open, data-popup-side, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Select — Value
    • Props: children, placeholder, render
    • Data Attributes: data-placeholder
  • Select — Icon
    • Props: render
    • Data Attributes: data-popup-open
  • Select — List
    • Props: render
  • Select — Portal
    • Props: container, render
  • Select — Backdrop
    • Props: render
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Select — Positioner
    • Props: align, alignItemWithTrigger, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --transform-origin
  • Select — Popup
    • Props: finalFocus, render
    • Data Attributes: data-align, data-closed, data-ending-style, data-open, data-side, data-starting-style
  • Select — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Select — Item
    • Props: disabled, label, nativeButton, render, value
    • Data Attributes: data-disabled, data-highlighted, data-selected
  • Select — Group
    • Props: render
  • Select — GroupLabel
    • Props: render
  • Select — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Select — Label
    • Props: render
  • Select — ItemText
    • Props: render
  • Select — ItemIndicator
    • Props: keepMounted, render
    • Data Attributes: data-ending-style, data-starting-style
  • Select — ScrollUpArrow
    • Props: keepMounted, render
    • Data Attributes: data-direction, data-ending-style, data-side, data-starting-style, data-visible
  • Select — ScrollDownArrow
    • Props: keepMounted, render
    • Data Attributes: data-direction, data-ending-style, data-side, data-starting-style, data-visible
• Types: Select.Arrow.Props, Select.Arrow.State, Select.Backdrop.Props, Select.Backdrop.State, Select.Group.Props, Select.Group.State, Select.GroupLabel.Props, Select.GroupLabel.State, Select.Icon.Props, Select.Icon.State, Select.Item.Props, Select.Item.State, Select.ItemIndicator.Props, Select.ItemIndicator.State, Select.ItemText.Props, Select.ItemText.State, Select.Label.Props, Select.Label.State, Select.List.Props, Select.List.State, Select.Popup.Props, Select.Popup.State, Select.Portal.Props, Select.Portal.State, Select.Positioner.Props, Select.Positioner.State, Select.Root.Props, Select.Root.State, Select.ScrollDownArrow.Props, Select.ScrollDownArrow.State, Select.ScrollUpArrow.Props, Select.ScrollUpArrow.State, Select.Separator.Props, Select.Separator.State, Select.Trigger.Props, Select.Trigger.State, Select.Value.Props, Select.Value.State

Read more

Separator

A separator element accessible to screen readers.

Outline

• Sections:
  • Anatomy
  • API reference
• Exports:
  • Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
• Types: Separator.Props, Separator.State

Read more

Slider

An easily stylable range input.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling a slider
    • Range slider
    • Steps
    • Marks
    • Thumb alignment
    • Vertical
    • Native attributes and events
    • Form integration
  • API reference
    • Root
    • Label
    • Value
    • Control
    • Track
    • Indicator
    • Thumb
• Exports:
  • Slider — Root
    • Props: aria-labelledby, class, defaultValue, disabled, form, format, host, id, largeStep, locale, max, min, minStepsBetweenValues, name, orientation, render, required, step, style, thumbAlignment, thumbCollisionBehavior, type, value
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Value
    • Props: aria-live, children, render
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Indicator
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Track
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Thumb
    • Props: class, defaultValue, disabled, form, getAriaLabel, getAriaValueText, host, id, index, name, render, style, type, value
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-index, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Control
    • Props: render
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-touched, data-valid
  • Slider — Label
    • Props: render
• Types: Slider.Control.Props, Slider.Control.State, Slider.Indicator.Props, Slider.Indicator.State, Slider.Label.Props, Slider.Label.State, Slider.Root.Props, Slider.Root.State, Slider.Thumb.Props, Slider.Thumb.State, Slider.Track.Props, Slider.Track.State, Slider.Value.Props, Slider.Value.State

Read more

Switch

A control that indicates whether a setting is on or off.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Labeling a switch
    • Using a sibling label
    • Native attributes and events
    • Form integration
  • API reference
    • Root
    • Thumb
• Exports:
  • Switch — Root
    • Props: checked, class, defaultChecked, disabled, form, host, id, name, readonly, render, required, style, type, uncheckedValue, value
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid
  • Switch — Thumb
    • Props: render
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid
• Types: Switch.Root.Props, Switch.Root.State, Switch.Thumb.Props, Switch.Thumb.State

Read more

Tabs

A component for toggling between related panels on the same page.

Outline

• Sections:
  • Anatomy
  • Examples
    • Animated panels
    • Links
  • API reference
    • Root
    • List
    • Tab
    • Indicator
    • Panel
• Exports:
  • Tabs — Root
    • Props: defaultValue, onValueChange, orientation, render, value
    • Data Attributes: data-activation-direction, data-orientation
  • Tabs — List
    • Props: activateOnFocus, loopFocus, render
    • Data Attributes: data-activation-direction, data-orientation
  • Tabs — Panel
    • Props: keepMounted, render, value
    • Data Attributes: data-activation-direction, data-ending-style, data-hidden, data-index, data-orientation, data-starting-style
  • Tabs — Indicator
    • Props: render, renderBeforeHydration
    • Data Attributes: data-activation-direction, data-orientation
    • CSS Variables: --active-tab-bottom, --active-tab-height, --active-tab-left, --active-tab-right, --active-tab-top, --active-tab-width
  • Tabs — Tab
    • Props: disabled, nativeButton, onclick, render, value
    • Data Attributes: data-activation-direction, data-active, data-disabled, data-orientation
• Types: Tabs.Indicator.Props, Tabs.Indicator.State, Tabs.List.Props, Tabs.List.State, Tabs.Panel.Props, Tabs.Panel.State, Tabs.Root.Props, Tabs.Root.State, Tabs.Tab.Props, Tabs.Tab.State

Read more

Toast

Generates toast notifications.

Outline

• Sections:
  • Anatomy
  • General usage
  • Global manager
  • Stacking and animations
  • Examples
    • Anchored toasts
    • Custom position
    • Undo action
    • Promise
    • Custom
    • Deduplicated toast
    • Varying heights
  • API reference
    • Provider
    • Portal
    • Viewport
    • Root
    • Content
    • Title
    • Description
    • Action
    • Close
    • Positioner
    • Arrow
  • getToastManager
    • add method
    • update method
    • close method
    • promise method
  • Additional types
• Exports:
  • Toast — Root
    • Props: render, swipeDirection, toast
    • Data Attributes: data-ending-style, data-expanded, data-limited, data-starting-style, data-swipe-direction, data-swiping, data-type
    • CSS Variables: --toast-height, --toast-index, --toast-offset-y, --toast-swipe-movement-x, --toast-swipe-movement-y
  • Toast — Provider
    • Props: limit, timeout, toastManager
  • Toast — Portal
    • Props: container, render
  • Toast — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, toast
    • Data Attributes: data-align, data-anchor-hidden, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --transform-origin
  • Toast — Arrow
    • Props: render
    • Data Attributes: data-align, data-side, data-uncentered
  • Toast — Content
    • Props: render
    • Data Attributes: data-behind, data-expanded
  • Toast — Title
    • Props: children, render
    • Data Attributes: data-type
  • Toast — Description
    • Props: children, render
    • Data Attributes: data-type
  • Toast — Close
    • Props: disabled, nativeButton, render
    • Data Attributes: data-type
  • Toast — Action
    • Props: children, disabled, nativeButton, render
    • Data Attributes: data-type
  • Toast — Viewport
    • Props: render
    • Data Attributes: data-expanded
    • CSS Variables: --toast-frontmost-height
• Types: Toast.Action.Props, Toast.Action.State, Toast.Arrow.Props, Toast.Arrow.State, Toast.Close.Props, Toast.Close.State, Toast.Content.Props, Toast.Content.State, Toast.Description.Props, Toast.Description.State, Toast.Portal.Props, Toast.Portal.State, Toast.Positioner.Props, Toast.Positioner.State, Toast.Provider.Props, Toast.Provider.State, Toast.Root.Props, Toast.Root.State, Toast.Title.Props, Toast.Title.State, Toast.Viewport.Props, Toast.Viewport.State

Read more

Toggle

A two-state button that can be on or off.

Outline

• Sections:
  • Anatomy
  • API reference
• Exports:
  • Toggle
    • Props: defaultPressed, disabled, nativeButton, onPressedChange, onclick, pressed, render, value
    • Data Attributes: data-disabled, data-pressed
• Types: Toggle.Props, Toggle.State

Read more

Toggle Group

Provides a shared state to a series of toggle buttons.

Outline

• Sections:
  • Anatomy
  • Examples
    • Multiple
  • API reference
• Exports:
  • ToggleGroup
    • Props: defaultValue, disabled, loopFocus, multiple, onValueChange, orientation, render, value
    • Data Attributes: data-disabled, data-multiple, data-orientation
• Types: ToggleGroup.Props, ToggleGroup.State

Read more

Toolbar

A container for grouping a set of buttons and controls.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Using with Menu
    • Using with Tooltip
    • Using with NumberField
  • API reference
    • Root
    • Button
    • Link
    • Input
    • Group
    • Separator
• Exports:
  • Toolbar — Root
    • Props: disabled, loopFocus, orientation, render
    • Data Attributes: data-disabled, data-orientation
  • Toolbar — Input
    • Props: disabled, focusableWhenDisabled, render
    • Data Attributes: data-disabled, data-focusable, data-orientation
  • Toolbar — Group
    • Props: disabled, render
    • Data Attributes: data-disabled, data-orientation
  • Toolbar — Separator
    • Props: orientation, render
    • Data Attributes: data-orientation
  • Toolbar — Button
    • Props: disabled, focusableWhenDisabled, nativeButton, onclick, render
    • Data Attributes: data-disabled, data-focusable, data-orientation
  • Toolbar — Link
    • Props: render
    • Data Attributes: data-orientation
• Types: Toolbar.Button.Props, Toolbar.Button.State, Toolbar.Group.Props, Toolbar.Group.State, Toolbar.Input.Props, Toolbar.Input.State, Toolbar.Link.Props, Toolbar.Link.State, Toolbar.Root.Props, Toolbar.Root.State, Toolbar.Separator.Props, Toolbar.Separator.State

Read more

Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • Alternatives to tooltips
    • Infotips
    • Description text
    • Contextual feedback messages
  • Examples
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Animating the Tooltip
      • Position and Size
      • Content
  • API reference
    • Provider
    • Root
    • Trigger
    • Portal
    • Positioner
    • Popup
    • Arrow
    • Viewport
  • createHandle
    • Handle
• Exports:
  • Tooltip — Root
    • Props: children, defaultOpen, defaultTriggerId, disableHoverablePopup, disabled, handle, onOpenChange, onOpenChangeComplete, open, trackCursorAxis, triggerId
  • Tooltip — Provider
    • Props: closeDelay, delay, timeout
  • Tooltip — Trigger
    • Props: closeDelay, closeOnClick, delay, disabled, handle, id, payload, render
    • Data Attributes: data-popup-open, data-trigger-disabled
  • Tooltip — Portal
    • Props: container, keepMounted, render
  • Tooltip — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky
    • Data Attributes: data-align, data-anchor-hidden, data-closed, data-open, data-side
    • CSS Variables: --anchor-height, --anchor-width, --available-height, --available-width, --positioner-height, --positioner-width, --transform-origin
  • Tooltip — Popup
    • Props: render
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Tooltip — Arrow
    • Props: render
    • Data Attributes: data-align, data-closed, data-instant, data-open, data-side, data-uncentered
  • Tooltip — Viewport
    • Props: render
    • Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width
• Types: Tooltip.Arrow.Props, Tooltip.Arrow.State, Tooltip.Popup.Props, Tooltip.Popup.State, Tooltip.Portal.Props, Tooltip.Portal.State, Tooltip.Positioner.Props, Tooltip.Positioner.State, Tooltip.Provider.Props, Tooltip.Provider.State, Tooltip.Root.Props, Tooltip.Root.State, Tooltip.Trigger.Props, Tooltip.Trigger.State, Tooltip.Viewport.Props, Tooltip.Viewport.State

Read more

Textarea

A native textarea element that automatically works with Field.

Outline

• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
• Exports:
  • Textarea
    • Props: defaultValue, render, value
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
• Types: Textarea.Props, Textarea.State

Read more