Adding a backdrop
Adding transitions
Basic example
Button component
A light wrapper around the native button element providing hover and focus states.
Checkbox
Toggleable checkbox with checked/disabled states.
CloseButton
Closes the nearest dialog ancestor when clicked.
Combobox
Accessible autocomplete and command palette component built from Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, and ComboboxOption.
Components
Data attribute styling
Exposes data-hover, data-active, data-focus, data-disabled and data-autofocus attributes.
Data attributes
Components expose data-* attributes such as data-selected and data-hover for styling states.
Data attribute styling
Style component states using data-* attributes like data-focus and data-selected.
Description component
Describes a form control.
Dialog
A fully-managed, renderless dialog component with accessibility and keyboard features.
DialogBackdrop
Adds a backdrop behind the dialog panel.
Disabled button
Add the disabled prop to a Button to disable it.
Disabling a tab
Use the disabled prop to disable a Tab and prevent it from being selected.
Disclosure
A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.
Dropdown Menu
Custom, accessible dropdown components with robust keyboard navigation support.
Examples
Field component
Groups a Label, Description, and form control together.
Field, Label, Description
Associate labels and descriptions with form controls.
Fieldset
Groups a set of form controls together with a title.
Forms
Framer Motion Integration
Composes with animation libraries like Framer Motion.
HTML forms support
Use components with native HTML forms.
Input component
A light wrapper around the native input element handling accessibility concerns.
Label component
Labels a form control.
Legend
The title for a Fieldset, rendered as a div.
Managing initial focus
Multiple selection
Select multiple values.
Popover
Floating panels with arbitrary content like navigation menus, built with Popover, PopoverButton, and PopoverPanel.
PopoverGroup
Groups related popovers so panels stay open while tabbing between them.
Render as different element
Render props
Access current component state via render props to conditionally apply styles or render content.
Rendering to a portal
Scrollable dialogs
Showing/hiding the dialog
Styling
Tabs
Accessible, fully customizable tab interfaces with focus management and keyboard navigation.
Transition component
Controls transition styles of conditionally rendered elements using CSS classes.
TransitionChild component
Coordinates multiple transitions and inherits the parent Transition open state.
Transitions
Add transitions to components.
Uncontrolled mode
Use components as uncontrolled.
useClose hook
Imperatively closes the dialog from a nested component.
Vertical tabs
Use the vertical prop to navigate with up/down arrow keys and set aria-orientation.
Virtual scrolling
Render active option details and virtual scrolling.