Components

• Accordion — Full Docs
• Alert Dialog — Full Docs
• Autocomplete — Full Docs
• Avatar — Full Docs
• Button — Full Docs
• Checkbox — Full Docs
• Checkbox Group — Full Docs
• Collapsible — Full Docs
• Combobox — Full Docs
• Context Menu — Full Docs
• Dialog — Full Docs
• Field — Full Docs
• Fieldset — Full Docs
• Form — Full Docs
• Input — Full Docs
• Menu — Full Docs
• Menubar — Full Docs
• Meter — Full Docs
• Navigation Menu — Full Docs
• Number Field — Full Docs
• Popover — Full Docs
• Preview Card — Full Docs
• Progress — Full Docs
• Radio — Full Docs
• Scroll Area — Full Docs
• Select — Full Docs
• Separator — Full Docs
• Slider — Full Docs
• Switch — Full Docs
• Tabs — Full Docs
• Toast — Full Docs
• Toggle — Full Docs
• Toggle Group — Full Docs
• Toolbar — Full Docs
• Tooltip — Full Docs

Accordion

A set of collapsible panels with headings.

Outline

• Keywords: React Accordion, Accordion Component, Collapsible Content, Expandable Panel, Accessible Accordion, Multi-Panel UI, Disclosure Widget, FAQ Component, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Open multiple panels
  • API reference
• Exports:
  • Accordion — Root
    • Props: className, defaultValue, disabled, hiddenUntilFound, keepMounted, loopFocus, multiple, onValueChange, orientation, render, style, value
    • Data Attributes: data-disabled, data-orientation
  • Accordion — Item
    • Props: className, disabled, onOpenChange, render, style, value
    • Data Attributes: data-disabled, data-index, data-open
  • Accordion — Header
    • Props: className, render, style
    • Data Attributes: data-disabled, data-index, data-open
  • Accordion — Trigger
    • Props: className, nativeButton, render, style
    • Data Attributes: data-disabled, data-panel-open
  • Accordion — Panel
    • Props: className, hiddenUntilFound, keepMounted, render, style
    • Data Attributes: data-disabled, data-ending-style, data-index, data-open, data-orientation, data-starting-style
    • CSS Variables: --accordion-panel-height, --accordion-panel-width

Read more

Alert Dialog

A dialog that requires a user response to proceed.

Outline

• Keywords: React Alert Dialog, Alert Dialog Component, Confirmation Modal, Warning Dialog, Blocking Modal, Interrupt Dialog, Destructive Action Confirm, Accessible Dialog, Headless React Components, React UI Overlay, Base UI
• Sections:
  • Anatomy
  • Examples
    • Open from a menu
    • Close confirmation
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
  • API reference
• Exports:
  • Alert Dialog — Root
    • Props: actionsRef, children, defaultOpen, defaultTriggerId, handle, onOpenChange, onOpenChangeComplete, open, triggerId
  • Alert Dialog — Backdrop
    • Props: className, forceRender, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Alert Dialog — Close
    • Props: className, nativeButton, render, style
    • Data Attributes: data-disabled
  • Alert Dialog — Description
    • Props: className, render, style
  • Alert Dialog — Popup
    • Props: className, finalFocus, initialFocus, render, style
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
    • CSS Variables: --nested-dialogs
  • Alert Dialog — Portal
    • Props: className, container, keepMounted, render, style
  • Alert Dialog — Title
    • Props: className, render, style
  • Alert Dialog — Trigger
    • Props: className, handle, id, nativeButton, payload, render, style
    • Data Attributes: data-disabled, data-popup-open
  • Alert Dialog — Viewport
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style

Read more

Autocomplete

An input that suggests options as you type.

Outline

• Keywords: React Autocomplete, Autocomplete Component, Search Suggestions, Filterable Input, Async Autocomplete, Typeahead, Lookahead, Autosuggest, Incremental Search, Predictive Text, Search Input, Accessible Combobox, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • TypeScript inference
  • Examples
    • Async search
    • Inline autocomplete
    • Grouped
    • Fuzzy matching
    • Limit results
    • Auto highlight
    • Grid layout
    • Virtualized
  • API reference
  • useFilter
    • Input parameters
    • Return value
• Exports:
  • Autocomplete — Root
    • Props: actionsRef, autoHighlight, children, defaultOpen, defaultValue, disabled, filter, filteredItems, grid, highlightItemOnHover, id, inline, inputRef, itemToStringValue, items, keepHighlight, limit, locale, modal, mode, name, onItemHighlighted, onOpenChange, onOpenChangeComplete, onValueChange, open, openOnInputClick, readOnly, required, submitOnItemClick, value, virtualized
  • Autocomplete — Value
    • Props: children

Read more

Avatar

An easily stylable avatar component.

Outline

• Keywords: React Avatar, Avatar Component, Profile Image UI, User Image, User Avatar, Profile Picture, Account Image, Profile Icon, Initials Fallback, Accessible Avatar, Headless React Components, Customizable Avatar, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Avatar — Root
    • Props: className, render, style
  • Avatar — Image
    • Props: className, onLoadingStatusChange, render, style
  • Avatar — Fallback
    • Props: className, delay, render, style

Read more

Button

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

Outline

• Keywords: React Button, Button Component, Focusable Disabled Button, Custom Element Button, Clickable Element, Action Button, Submit Button, Accessible Button, Loading State Button, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Rendering as another tag
    • Loading states
  • API reference
• Exports:
  • Button
    • Props: className, disabled, focusableWhenDisabled, nativeButton, render, style
    • Data Attributes: data-disabled

Read more

Checkbox

An easily stylable checkbox component.

Outline

• Keywords: React Checkbox, Checkbox Component, Accessible Checkbox, Customizable Checkbox, Form Control Checkbox, Checkmark, Tick Box, Selection Control, Checkbox Input, Binary Input, Checked State, Indeterminate Checkbox, Tri-State Checkbox, Headless React Components, Input Indicator, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Form integration
  • API reference
• Exports:
  • Checkbox — Root
    • Props: checked, className, defaultChecked, disabled, id, indeterminate, inputRef, name, nativeButton, onCheckedChange, parent, readOnly, render, required, style, 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
  • Checkbox — Indicator
    • Props: className, keepMounted, render, style
    • 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

Read more

Checkbox Group

Provides shared state to a series of checkboxes.

Outline

• Keywords: React Checkbox Group, Checkbox Group Component, Grouped Checkboxes, Multiple Selection, Checkbox List, Multi-Select Checkboxes, Parent Child Checkbox, Accessible Checkbox Group, Form Fieldset Control, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Parent checkbox
    • Nested parent checkbox
  • API reference
• Exports:
  • CheckboxGroup
    • Props: allValues, className, defaultValue, disabled, onValueChange, render, style, value
    • Data Attributes: data-disabled

Read more

Collapsible

A collapsible panel controlled by a button.

Outline

• Keywords: React Collapsible, Collapsible Component, Expandable Panel, Toggle Panel Button, Disclosure Widget, Show/Hide Content, Accordion Item, Accessible Disclosure, Headless React Components, Collapsible Trigger Panel, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Collapsible — Root
    • Props: className, defaultOpen, disabled, onOpenChange, open, render, style
  • Collapsible — Trigger
    • Props: className, nativeButton, render, style
    • Data Attributes: data-panel-open
  • Collapsible — Panel
    • Props: className, hiddenUntilFound, keepMounted, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
    • CSS Variables: --collapsible-panel-height, --collapsible-panel-width

Read more

Combobox

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

Outline

• Keywords: React Combobox, Combobox Component, Combo Box, Filterable Select, Searchable Dropdown, Editable Select, Typeahead Select, Autocomplete Dropdown, Tags Input, Chip Input, Token Input, Multi-Value Input, Multiple Select Combobox, Async Combobox, Accessible Combobox, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • TypeScript
  • Examples
    • Multiple select
    • Input inside popup
    • Grouped
    • Async search (single)
    • Async search (multiple)
    • Creatable
    • Virtualized
  • API reference
  • useFilter
    • Input parameters
    • Return value
• Exports:
  • Combobox — Root
    • Props: actionsRef, autoHighlight, children, defaultInputValue, defaultOpen, defaultValue, disabled, filter, filteredItems, grid, highlightItemOnHover, id, inline, inputRef, inputValue, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, limit, locale, modal, multiple, name, onInputValueChange, onItemHighlighted, onOpenChange, onOpenChangeComplete, onValueChange, open, openOnInputClick, readOnly, required, value, virtualized
  • Combobox — Trigger
    • Props: className, disabled, nativeButton, render, style
    • 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 — Input
    • Props: className, disabled, render, style
    • 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 — Popup
    • Props: className, finalFocus, initialFocus, render, style
    • Data Attributes: data-align, data-closed, data-empty, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Combobox — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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 — List
    • Props: children, className, render, style
  • Combobox — Item
    • Props: children, className, disabled, index, nativeButton, onClick, render, style, value
    • Data Attributes: data-disabled, data-highlighted, data-selected
  • Combobox — ItemIndicator
    • Props: children, className, keepMounted, render, style
  • Combobox — Value
    • Props: children
  • Combobox — Icon
    • Props: className, render, style
  • Combobox — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Combobox — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Combobox — Portal
    • Props: className, container, keepMounted, render, style
  • Combobox — Empty
    • Props: className, render, style
  • Combobox — Group
    • Props: className, items, render, style
  • Combobox — GroupLabel
    • Props: className, render, style
  • Combobox — Row
    • Props: className, render, style
  • Combobox — Chips
    • Props: className, render, style
  • Combobox — Chip
    • Props: className, render, style
  • Combobox — ChipRemove
    • Props: className, nativeButton, render, style
  • Combobox — Clear
    • Props: className, disabled, keepMounted, nativeButton, render, style
    • Data Attributes: data-disabled, data-ending-style, data-popup-open, data-starting-style
  • Combobox — Status
    • Props: className, render, style
  • Combobox — Collection
    • Props: children

Read more

Context Menu

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

Outline

• Keywords: React Context Menu, Context Menu Component, Right Click Menu, Secondary Click Menu, Pointer Menu, Touch Hold Menu, Long Press Menu, Nested Menu React, Accessible Context Menu, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Nested menu
  • API reference
• Exports:
  • Context Menu — Root
    • Props: actionsRef, children, closeParentOnEsc, defaultOpen, defaultTriggerId, disabled, handle, highlightItemOnHover, loopFocus, onOpenChange, onOpenChangeComplete, open, orientation, triggerId
  • Context Menu — Trigger
    • Props: className, render, style
    • Data Attributes: data-popup-open, data-pressed

Read more

Dialog

A popup that opens on top of the entire page.

Outline

• Keywords: React Dialog, Modal Dialog Component, Modal Popup, Modal Window, Popup Window, Modal Overlay, Overlay, Lightbox, Popover Dialog, Controlled Dialog State, Nested Dialog React, Accessible Dialog, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • State
    • Open from a menu
    • Nested dialogs
    • Close confirmation
    • Outside scroll dialog
    • Inside scroll dialog
    • Placing elements outside the popup
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
  • API reference
• Exports:
  • Dialog — Root
    • Props: actionsRef, children, defaultOpen, defaultTriggerId, disablePointerDismissal, handle, modal, onOpenChange, onOpenChangeComplete, open, triggerId
  • Dialog — Trigger
    • Props: className, handle, id, nativeButton, payload, render, style
    • Data Attributes: data-disabled, data-popup-open
  • Dialog — Portal
    • Props: className, container, keepMounted, render, style
  • Dialog — Popup
    • Props: className, finalFocus, initialFocus, render, style
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style
    • CSS Variables: --nested-dialogs
  • Dialog — Backdrop
    • Props: className, forceRender, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Dialog — Title
    • Props: className, render, style
  • Dialog — Description
    • Props: className, render, style
  • Dialog — Close
    • Props: className, nativeButton, render, style
    • Data Attributes: data-disabled
  • Dialog — Viewport
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-nested, data-nested-dialog-open, data-open, data-starting-style

Read more

Field

A component that provides labeling and validation for form controls.

Outline

• Keywords: React Field Component, Form Field Labeling, Form Label, Input Wrapper, Form Validation, Accessible Form Field, Field Validation UI, Headless React Components, Custom Form Control Wrapper, Form Description Error State, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Field — Root
    • Props: className, dirty, disabled, invalid, name, render, style, touched, validate, validationDebounceTime, validationMode
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Label
    • Props: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Description
    • Props: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Error
    • Props: className, match, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Control
    • Props: className, defaultValue, onValueChange, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid
  • Field — Validity
    • Props: children
  • Field — Item
    • Props: className, disabled, render, style

Read more

Fieldset

A native fieldset element with an easily stylable legend.

Outline

• Keywords: React Fieldset, Fieldset Component, Form Field Grouping, Form Fieldset, Form Group, Input Grouping, Custom Legend Styling, Fieldset Legend, Accessible Fieldset, Headless React Components, Form Section Labeling, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Fieldset — Root
    • Props: className, render, style
  • Fieldset — Legend
    • Props: className, render, style

Read more

Form

A native form element with consolidated error handling.

Outline

• Keywords: React Form Component, Form Submission Handler, Form Validation, Form State, Server Function Form, JavaScript Form Values, Accessible Form, Headless React Components, Form Error Handling, Base UI
• Sections:
  • Anatomy
  • Examples
    • Submit with a Server Function
    • Submit form values as a JavaScript object
    • Using with Zod
  • API reference
• Exports:
  • Form
    • Props: className, errors, onFormSubmit, render, style, validationMode

Read more

Input

A native input element that automatically works with Field.

Outline

• Keywords: React Input, Input Component, Input Field, Form Input Field, Text Field, Text Input, Text Box, Form Input, Textarea Alternative, Controlled Input, Form Element, Accessible Input, Headless React Components, Unstyled Input, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
• Exports:
  • Input
    • Props: className, defaultValue, onValueChange, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-touched, data-valid

Read more

Menu

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

Outline

• Keywords: React Menu, Menu Component, Dropdown Menu, Dropdown Actions, Command Menu, Action List, Keyboard Navigation Menu, Nested Menu React, Context Actions, Headless React Components, Base UI
• 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
  • API reference
• Exports:
  • Menu — Root
    • Props: actionsRef, children, closeParentOnEsc, defaultOpen, defaultTriggerId, disabled, handle, highlightItemOnHover, loopFocus, modal, onOpenChange, onOpenChangeComplete, open, orientation, triggerId
  • Menu — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Menu — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Menu — CheckboxItem
    • Props: checked, className, closeOnClick, defaultChecked, disabled, label, nativeButton, onCheckedChange, onClick, render, style
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Menu — CheckboxItemIndicator
    • Props: className, keepMounted, render, style
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Menu — Group
    • Props: children, className, render, style
  • Menu — GroupLabel
    • Props: className, render, style
  • Menu — Item
    • Props: className, closeOnClick, disabled, label, nativeButton, onClick, render, style
    • Data Attributes: data-disabled, data-highlighted
  • Menu — Popup
    • Props: children, className, finalFocus, render, style
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Menu — Portal
    • Props: className, container, keepMounted, render, style
  • Menu — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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
  • Menu — RadioGroup
    • Props: children, className, defaultValue, disabled, onValueChange, render, style, value
  • Menu — RadioItem
    • Props: className, closeOnClick, disabled, label, nativeButton, onClick, render, style, value
    • Data Attributes: data-checked, data-disabled, data-highlighted, data-unchecked
  • Menu — RadioItemIndicator
    • Props: className, keepMounted, render, style
    • Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
  • Menu — SubmenuRoot
    • Props: actionsRef, children, closeParentOnEsc, defaultOpen, defaultTriggerId, disabled, handle, highlightItemOnHover, loopFocus, onOpenChange, onOpenChangeComplete, open, orientation, triggerId
  • Menu — Trigger
    • Props: children, className, closeDelay, delay, disabled, handle, nativeButton, openOnHover, payload, render, style
    • Data Attributes: data-popup-open, data-pressed
  • Menu — SubmenuTrigger
    • Props: className, closeDelay, delay, disabled, label, nativeButton, onClick, openOnHover, render, style
    • Data Attributes: data-disabled, data-highlighted, data-popup-open

Read more

Menubar

A menu bar providing commands and options for your application.

Outline

• Keywords: React Menubar, Menubar Component, Application Menu Bar, App Menu, Navigation Bar, Command Bar, Desktop Style Menu, Keyboard Navigation Menu, Accessible Menubar, Headless React Components, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Menubar
    • Props: className, disabled, loopFocus, modal, orientation, render, style

Read more

Meter

A graphical display of a numeric value within a range.

Outline

• Keywords: React Meter, Meter Component, Progress Meter, Gauge, Level Indicator, Measurement Display, Capacity Indicator, Value Indicator, Rating Meter, Fuel Gauge, Accessible Meter, Headless React Components, Graphical Value Display, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Meter — Root
    • Props: aria-valuetext, className, format, getAriaValueText, locale, max, min, render, style, value
  • Meter — Indicator
    • Props: className, render, style
  • Meter — Label
    • Props: className, render, style
  • Meter — Track
    • Props: className, render, style
  • Meter — Value
    • Props: children, className, render, style

Read more

Navigation Menu

A collection of links and menus for website navigation.

Outline

• Keywords: React Navigation Menu, Navigation Menu Component, Mega Menu React, Dropdown Nav, Flyout Menu, Site Navigation, Navbar, Header Menu, Multi Level Navigation, Custom Link Menu, Scrollable Navigation Menu, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Nested submenus
    • Custom links
    • Large menus
  • API reference
• Exports:
  • Navigation Menu — Root
    • Props: actionsRef, className, closeDelay, defaultValue, delay, onOpenChangeComplete, onValueChange, orientation, render, style, value
  • Navigation Menu — Trigger
    • Props: className, nativeButton, render, style
    • Data Attributes: data-popup-open, data-pressed
  • Navigation Menu — Portal
    • Props: className, container, keepMounted, render, style
  • Navigation Menu — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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 — Viewport
    • Props: className, render, style
  • Navigation Menu — List
    • Props: className, render, style
  • Navigation Menu — Item
    • Props: className, render, style, value
  • Navigation Menu — Content
    • Props: className, render, style
    • Data Attributes: data-activation-direction, data-closed, data-ending-style, data-open, data-starting-style
  • Navigation Menu — Popup
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-ending-style, data-open, data-side, data-starting-style
    • CSS Variables: --popup-height, --popup-width
  • Navigation Menu — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Navigation Menu — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Navigation Menu — Link
    • Props: active, className, closeOnClick, render, style
    • Data Attributes: data-active
  • Navigation Menu — Icon
    • Props: className, render, style

Read more

Number Field

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

Outline

• Keywords: React Number Field, Number Input Component, Number Spinner, Spinner Input, Spin Button, Stepper, Numeric Input, Increment Decrement Buttons, Up Down Control, Scrub Area Input, Numeric Form Control, Accessible Number Field, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
• Exports:
  • Number Field — Root
    • Props: allowWheelScrub, className, defaultValue, disabled, format, id, inputRef, largeStep, locale, max, min, name, onValueChange, onValueCommitted, readOnly, render, required, smallStep, snapOnStep, step, style, 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 — Group
    • Props: className, render, style
    • 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: className, nativeButton, render, style
    • 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: className, nativeButton, render, style
    • 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, className, render, style
    • 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: className, direction, pixelSensitivity, render, style, 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: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-scrubbing, data-touched, data-valid

Read more

Popover

An accessible popup anchored to a button.

Outline

• Keywords: React Popover, Popover Component, Popover Menu, Popup Menu, Anchored Popup, Dropdown, Overlay, Floating Panel, Tooltip Alternative, Info Box, Callout, Popup Content, Detached Trigger Popover, Multi Trigger Popover, Animated Popover, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Opening on hover
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Animating the Popover
      • Position and Size
      • Content
  • API reference
• Exports:
  • Popover — Root
    • Props: actionsRef, children, defaultOpen, defaultTriggerId, handle, modal, onOpenChange, onOpenChangeComplete, open, triggerId
  • Popover — Trigger
    • Props: className, closeDelay, delay, handle, id, nativeButton, openOnHover, payload, render, style
    • Data Attributes: data-popup-open, data-pressed
  • Popover — Portal
    • Props: className, container, keepMounted, render, style
  • Popover — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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: className, finalFocus, initialFocus, render, style
    • 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: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Popover — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Popover — Title
    • Props: className, render, style
  • Popover — Description
    • Props: className, render, style
  • Popover — Close
    • Props: className, nativeButton, render, style
  • Popover — Viewport
    • Props: children, className, render, style
    • Data Attributes: data-activation-direction, data-current, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width

Read more

Preview Card

A popup that appears when a link is hovered, showing a preview for sighted users.

Outline

• Keywords: React Preview Card, Preview Card Component, Link Hover Preview, Hover Card React, Hover Card, Link Tooltip, URL Preview, Link Preview Popup, Content Preview, Accessible Preview Popup, Headless React Components, Link Preview UI, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Preview Card — Root
    • Props: actionsRef, children, defaultOpen, onOpenChange, onOpenChangeComplete, open
  • Preview Card — Trigger
    • Props: className, closeDelay, delay, render, style
    • Data Attributes: data-popup-open
  • Preview Card — Portal
    • Props: className, container, keepMounted, render, style
  • Preview Card — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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
  • Preview Card — Popup
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-ending-style, data-open, data-side, data-starting-style
  • Preview Card — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Preview Card — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style

Read more

Progress

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

Outline

• Keywords: React Progress Bar, Progress Component, Progress Indicator, Loader, Loading Bar, Upload Progress, Download Progress, Task Status Indicator, Determinate Progress, Indeterminate Progress, Accessible Progress, Headless React Components, Loading Indicator, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Progress — Root
    • Props: aria-valuetext, className, format, getAriaValueText, locale, max, min, render, style, value
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Indicator
    • Props: className, render, style
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Label
    • Props: className, render, style
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Track
    • Props: className, render, style
    • Data Attributes: data-complete, data-indeterminate, data-progressing
  • Progress — Value
    • Props: children, className, render, style
    • Data Attributes: data-complete, data-indeterminate, data-progressing

Read more

Radio

An easily stylable radio button component.

Outline

• Keywords: React Radio Button, Radio Group Component, Radio Button, Radio Input, Single Choice, Exclusive Choice, Mutually Exclusive, Option Selector, Option Button, Form Radio Control, Accessible Radio Group, Customizable Radio, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
    • RadioGroup
• Exports:
  • Radio — Root
    • Props: className, disabled, inputRef, nativeButton, readOnly, render, required, style, 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 — Indicator
    • Props: className, keepMounted, render, style
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid

Read more

Scroll Area

A native scroll container with custom scrollbars.

Outline

• Keywords: React Scroll Area, Custom Scrollbars, Custom Scroll, Scrollbar, Styled Scrollbar, Virtual Scroll, Scroll Area Component, Overflow Container, Scrollable Region, Scrollable Content, Overflow Scroll, Gradient Scroll Fade, Scrollable Container, Headless React Components, Base UI
• Sections:
  • Anatomy
  • Examples
    • Both scrollbars
    • Gradient scroll fade
  • API reference
• Exports:
  • Scroll Area — Root
    • Props: className, overflowEdgeThreshold, render, style
    • 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
    • CSS Variables: --scroll-area-corner-height, --scroll-area-corner-width
  • Scroll Area — Viewport
    • Props: className, render, style
    • 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
    • CSS Variables: --scroll-area-overflow-x-end, --scroll-area-overflow-x-start, --scroll-area-overflow-y-end, --scroll-area-overflow-y-start
  • Scroll Area — Scrollbar
    • Props: className, keepMounted, orientation, render, style
    • 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 — Content
    • Props: className, render, style
  • Scroll Area — Thumb
    • Props: className, render, style
    • Data Attributes: data-orientation
  • Scroll Area — Corner
    • Props: className, render, style

Read more

Select

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

Outline

• Keywords: React Select Component, Dropdown Select, Select Box, Select Menu, Picker, Listbox, Choice Selector, Option List, Dropdown Menu, Combo Box, Multi Select React, Multiselect, Object Value Select, Accessible Select, Align Item with Trigger, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • TypeScript
  • Positioning
  • Formatting the value
  • Examples
    • Multiple selection
    • Object values
  • API reference
• Exports:
  • Select — Root
    • Props: actionsRef, children, defaultOpen, defaultValue, disabled, highlightItemOnHover, id, inputRef, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, modal, multiple, name, onOpenChange, onOpenChangeComplete, onValueChange, open, readOnly, required, value
  • Select — Trigger
    • Props: children, className, disabled, nativeButton, render, style
    • Data Attributes: data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-placeholder, data-popup-open, data-pressed, data-readonly, data-required, data-touched, data-valid
  • Select — Value
    • Props: children, className, render, style
    • Data Attributes: data-placeholder
  • Select — Icon
    • Props: className, render, style
    • Data Attributes: data-popup-open
  • Select — Portal
    • Props: className, container, render, style
  • Select — Backdrop
    • Props: className, render, style
    • Data Attributes: data-closed, data-ending-style, data-open, data-starting-style
  • Select — Positioner
    • Props: align, alignItemWithTrigger, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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: children, className, render, style
    • Data Attributes: data-align, data-closed, data-ending-style, data-open, data-side, data-starting-style
  • Select — List
    • Props: className, render, style
  • Select — Item
    • Props: children, className, disabled, label, nativeButton, render, style, value
    • Data Attributes: data-disabled, data-highlighted, data-selected
  • Select — ItemIndicator
    • Props: children, className, keepMounted, render, style
  • Select — ItemText
    • Props: className, render, style
  • Select — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-open, data-side, data-uncentered
  • Select — ScrollDownArrow
    • Props: className, keepMounted, render, style
    • Data Attributes: data-direction, data-ending-style, data-side, data-starting-style, data-visible
  • Select — ScrollUpArrow
    • Props: className, keepMounted, render, style
    • Data Attributes: data-direction, data-ending-style, data-side, data-starting-style, data-visible
  • Select — Group
    • Props: className, render, style
  • Select — GroupLabel
    • Props: className, render, style

Read more

Separator

A separator element accessible to screen readers.

Outline

• Keywords: React Separator, Divider Component, Divider, Horizontal Rule, Horizontal Divider, Vertical Divider, Visual Separator, Section Divider, HR, Accessible Separator, Screen Reader Separator, Headless React Components, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Separator
    • Props: className, orientation, render, style

Read more

Slider

An easily stylable range input.

Outline

• Keywords: React Slider, Range Slider Component, Range Input, Range Control, Track Control, Value Selector, Dual Slider, Double Slider, Two-Handle Slider, Multi Thumb Slider, Thumb Alignment Edge, Accessible Slider, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Range slider
    • Thumb alignment
  • API reference
• Exports:
  • Slider — Root
    • Props: className, defaultValue, disabled, format, largeStep, locale, max, min, minStepsBetweenValues, name, onValueChange, onValueCommitted, orientation, render, step, style, thumbAlignment, thumbCollisionBehavior, value
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid
  • Slider — Value
    • Props: children, className, render, style
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid
  • Slider — Control
    • Props: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid
  • Slider — Track
    • Props: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid
  • Slider — Thumb
    • Props: className, disabled, getAriaLabel, getAriaValueText, index, inputRef, onBlur, onFocus, render, style, tabIndex
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-index, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid
  • Slider — Indicator
    • Props: className, render, style
    • Data Attributes: data-dirty, data-disabled, data-dragging, data-focused, data-invalid, data-orientation, data-readonly, data-required, data-touched, data-valid

Read more

Switch

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

Outline

• Keywords: React Switch, Toggle Switch Component, Toggle Switch, Toggle Button, On/Off Control, On Off Switch, Binary Switch, Checkbox Alternative, Form Toggle Control, Accessible Switch, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • API reference
• Exports:
  • Switch — Root
    • Props: checked, className, defaultChecked, disabled, id, inputRef, name, nativeButton, onCheckedChange, readOnly, render, required, style, uncheckedValue
    • 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: className, render, style
    • Data Attributes: data-checked, data-dirty, data-disabled, data-filled, data-focused, data-invalid, data-readonly, data-required, data-touched, data-unchecked, data-valid

Read more

Tabs

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

Outline

• Keywords: React Tabs, Tabbed Interface Component, Tab Panel, Tab Control, Tabbed Navigation, Tabbed UI, Page Switcher, Content Switcher, View Switcher, Carousel Alternative, Tab List Indicator, Accessible Tabs, Headless React Components, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Tabs — Root
    • Props: className, defaultValue, onValueChange, orientation, render, style, value
    • Data Attributes: data-activation-direction, data-orientation
  • Tabs — Indicator
    • Props: className, render, renderBeforeHydration, style
    • 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: className, disabled, nativeButton, render, style, value
    • Data Attributes: data-activation-direction, data-active, data-disabled, data-orientation
  • Tabs — Panel
    • Props: className, keepMounted, render, style, value
    • Data Attributes: data-activation-direction, data-hidden, data-index, data-orientation
  • Tabs — List
    • Props: activateOnFocus, className, loopFocus, render, style
    • Data Attributes: data-activation-direction, data-orientation

Read more

Toast

Generates toast notifications.

Outline

• Keywords: React Toast, Toast Notification, Toast Notifications, Notification Component, Notification, Snackbar, Message Notification, Alert Notification, Alert Message, Flash Message, Push Notification, Temporary Message, Dismissible Notification, Toast Message, Toast Manager, Anchored Toast, Swipe Dismiss Toast, Accessible Toast, Headless React Components, Base UI
• Sections:
  • Anatomy
  • General usage
  • Global manager
  • Stacking and animations
  • Examples
    • Anchored toasts
    • Custom position
    • Undo action
    • Promise
    • Custom
    • Varying heights
  • API reference
  • useToastManager
    • Return value
    • Method options
    • add method
    • update method
    • close method
    • promise method
• Exports:
  • Toast — Root
    • Props: className, render, style, 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: children, limit, timeout, toastManager
  • Toast — Viewport
    • Props: className, render, style
    • Data Attributes: data-expanded
    • CSS Variables: --toast-frontmost-height
  • Toast — Content
    • Props: className, render, style
    • Data Attributes: data-behind, data-expanded
  • Toast — Description
    • Props: className, render, style
    • Data Attributes: data-type
  • Toast — Title
    • Props: className, render, style
    • Data Attributes: data-type
  • Toast — Close
    • Props: className, nativeButton, render, style
    • Data Attributes: data-type
  • Toast — Action
    • Props: className, nativeButton, render, style
    • Data Attributes: data-type
  • Toast — Portal
    • Props: className, container, render, style
  • Toast — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style, 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: className, render, style
    • Data Attributes: data-align, data-side, data-uncentered

Read more

Toggle

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

Outline

• Keywords: React Toggle, Toggle Button Component, Two State Button, Press Button, Push Toggle, Pressed State Button, Toggle Control, ARIA Pressed Control, Accessible Toggle, Headless React Components, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • Toggle
    • Props: className, defaultPressed, disabled, nativeButton, onPressedChange, pressed, render, style, value
    • Data Attributes: data-pressed

Read more

Toggle Group

Provides a shared state to a series of toggle buttons.

Outline

• Keywords: React Toggle Group, Toggle Button Group, Segmented Control, Button Set, Radio Group Alternative, Exclusive Selection Toggle, Multi Select Toggle Buttons, Accessible Toggle Group, Headless React Components, Base UI
• Sections:
  • Anatomy
  • API reference
• Exports:
  • ToggleGroup
    • Props: className, defaultValue, disabled, loopFocus, multiple, onValueChange, orientation, render, style, value
    • Data Attributes: data-disabled, data-multiple, data-orientation

Read more

Toolbar

A container for grouping a set of buttons and controls.

Outline

• Keywords: React Toolbar, Toolbar Button Group, Action Bar, Button Bar, Command Strip, Headless Toolbar Component, Accessible Toolbar, Popup Trigger Toolbar, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Using with Menu
    • Using with Tooltip
    • Using with NumberField
  • API reference
• Exports:
  • Toolbar — Root
    • Props: className, disabled, loopFocus, orientation, render, style
    • Data Attributes: data-disabled, data-orientation
  • Toolbar — Group
    • Props: className, disabled, render, style
    • Data Attributes: data-disabled, data-orientation
  • Toolbar — Button
    • Props: className, disabled, focusableWhenDisabled, nativeButton, render, style
    • Data Attributes: data-disabled, data-focusable, data-orientation
  • Toolbar — Link
    • Props: className, render, style
    • Data Attributes: data-orientation
  • Toolbar — Input
    • Props: className, defaultValue, disabled, focusableWhenDisabled, render, style
    • Data Attributes: data-disabled, data-focusable, data-orientation
  • Toolbar — Separator
    • Props: className, orientation, render, style
    • Data Attributes: data-orientation

Read more

Tooltip

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

Outline

• Keywords: React Tooltip, Tooltip Component, Detached Trigger Tooltip, Hint, Help Text, Hover Text, Hover Hint, Info Popup, Infotip, Flyout, Accessible Tooltip, Multiple Tooltip Triggers, Animated Tooltip, Headless React Components, Base UI
• Sections:
  • Usage guidelines
  • Anatomy
  • Examples
    • Detached triggers
    • Multiple triggers
    • Controlled mode with multiple triggers
    • Animating the Tooltip
      • Position and Size
      • Content
  • API reference
• Exports:
  • Tooltip — Provider
    • Props: children, closeDelay, delay, timeout
  • Tooltip — Root
    • Props: actionsRef, children, defaultOpen, defaultTriggerId, disableHoverablePopup, disabled, handle, onOpenChange, onOpenChangeComplete, open, trackCursorAxis, triggerId
  • Tooltip — Trigger
    • Props: className, closeDelay, delay, handle, payload, render, style
    • Data Attributes: data-popup-open
  • Tooltip — Portal
    • Props: className, container, keepMounted, render, style
  • Tooltip — Positioner
    • Props: align, alignOffset, anchor, arrowPadding, className, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, render, side, sideOffset, sticky, style
    • 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
  • Tooltip — Popup
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style
  • Tooltip — Arrow
    • Props: className, render, style
    • Data Attributes: data-align, data-closed, data-instant, data-open, data-side, data-uncentered
  • Tooltip — Viewport
    • Props: children, className, render, style
    • Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
    • CSS Variables: --popup-height, --popup-width

Read more