@headlessui/[email protected]

Fixed

• Fix prematurely added anchoring styles on ListboxOptions (#3337)
• Ensure unmount on Dialog works in combination with the transition prop on DialogBackdrop and DialogPanel components (#3352)
• Fix crash in Combobox component when in virtual mode when options are empty (#3356)
• Fix hanging tests when using anchor prop (#3357)
• Fix transition and focus prop combination for PopoverPanel component (#3361)
• Fix outside click in nested portalled Popover components (#3362)
• Fix restoring focus to correct element when closing Dialog component (#3365)
• Fix flushSync warning for Combobox component with immediate prop enabled (#3366)

@headlessui/[email protected]

Fixed

• Fix issues spreading omitted props onto components (#3313)
• Fix initial anchor="selection" positioning (#3324)
• Fix render prop in ComboboxOptions to use any instead of unknown (#3327)
• Fix incorrect Transition boundary for Dialog component (#3331)

@headlessui/[email protected]

We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings. See our announcement blog to learn more.

Changelog

Added

• Add ability to render multiple Dialog components at once (without nesting them) (#3242)
• Add new data-attribute-based transition API (#3273, #3285, #3307, #3309, #3312)
• Add DialogBackdrop component (#3307, #3310)
• Add PopoverBackdrop component to replace PopoverOverlay (#3308)

Fixed

• Keep Combobox open when clicking scrollbar in ComboboxOptions (#3249)
• Ensure ComboboxInput does not sync with current value while typing (#3259)
• Fix visual jitter in Combobox component when using native scrollbar (#3190)
• Improve UX by freezing ComboboxOptions while closing (#3304)
• Merge incoming style prop on ComboboxOptions, ListboxOptions, MenuItems, and PopoverPanel components (#3250)
• Prevent focus on Checkbox when it is disabled (#3251)
• Use useId instead of React internals (for React 19 compatibility) (#3254)
• Cancel outside click behavior on touch devices when scrolling (#3266)
• Correctly apply conditional classes when using Transition and TransitionChild components (#3303)

Changed

• Allow using the Tab and Shift+Tab keys when the Listbox component is open (#3284)

@headlessui/[email protected]

Fixed

• Improve CJS types (#2880)
• Improve ESM types (#3051)

@headlessui/[email protected]

Fixed

• [internal] Don’t set a focus fallback for Dialog’s in demo mode (#3194)
• Ensure page doesn't scroll down when pressing Escape to close the Dialog component (#3218)
• Fix crash when toggling between virtual and non-virtual mode in Combobox component (#3236)
• Ensure tabbing to a portalled PopoverPanel component moves focus inside (without using PortalGroup) (#3239)
• Only handle form reset when defaultValue is used (#3240)

Deprecated

• Mark SwitchGroup as deprecated, prefer Field instead (#3232)

Changed

• Use native fieldset instead of div by default for Fieldset component (#3237)

@headlessui/[email protected]

Fixed

• Don’t cancel touchmove on input elements inside a dialog (#3166)
• Ensure clicking a ComboboxOption after filtering the options, correctly triggers a change (#3180)

@headlessui/[email protected]

Fixed

• Make sure disabling demo mode on Combobox works (#3182)

@headlessui/[email protected]

Fixed

• Improve performance of internal useInertOthers hook (#3181)

@headlessui/[email protected]

Fixed

• Remove accidental deprecation comments on DialogPanel and DialogTitle (#3176)

@headlessui/[email protected]

We just released Headless UI v2.0 for React which includes a ton of new stuff:

• Built-in anchor positioning — using Floating UI, components like Menu, Listbox, and more can now automatically position their popovers to be anchored to their trigger, adapting as needed to changes in the viewport.
• Headless checkbox component — we've added a headless Checkbox component to complement our existing RadioGroup component, making it easy to build totally custom checkbox controls.
• HTML form components — we've added Input, Select, Textarea, Label, Description, Fieldset, and Legend components that handle all of the ID generation and aria-* attribute mapping you need to do to connect form fields together.
• Improved hover and focus-visible detection — using hooks from the awesome React Aria library under the hood, Headless UI now adds smarter data-hover and data-focus attributes to your controls that behave more consistently across different devices than the native pseudo-classes.
• Combobox list virtualization — the Combobox component can now handle giant lists of options with no performance issues.

Changelog

Added

• Add new Checkbox component (#2887, #2962)
• Add new Button component (#2887)
• Add new Input component (#2887, #2902, #2940)
• Add new Textarea component (#2887, #2902, #2940)
• Add new Select component (#2887, #2902)
• Add new Fieldset and Legend components (#2887)
• Add new Field, Label, Description components (#2887, #2941)
• Add new MenuSection, MenuHeading, and MenuSeparator components (#2887)
• Add new ListboxSelectedOption component (#2887)
• Add new DataInteractive component (#2887)
• Add new CloseButton component and useClose hook (#3096)
• Add new anchor, modal, and portal props to Combobox, Listbox, Menu and Popover components (#2887, #3075, #3097, #3111, #3115, #3121, #3124, #3133, #3138, #3148, #3152, #3154, #3157)
• Add new autoFocus prop to focusable components (#2887)
• Add new virtual prop to Combobox component (#2779, #3128, #3160, #3161, #3163)
• Add new onClose prop to Combobox component (#3122)
• Add new immediate prop to Combobox for immediately opening the Combobox when the input receives focus (#2686)
• Add new --button-width CSS variable on the ListboxOptions, MenuItems, and PopoverPanel components (#2887, #3058)
• Add new --input-width and --button-width CSS variables on the ComboboxOptions component (#3057)
• Add new data-* attributes as an alternative to the existing data-headlessui-state attribute (#2887, #3035, #3061)

Fixed

• Fix scroll-locking on iOS (#2891)
• Fix cancellation of events when using disabled or aria-disabled attributes (#2890)
• Fix unnecessary execution of the displayValue callback in ComboboxInput component (#3048)
• Fix types for multiple prop in Combobox component (#3099)
• Fix focus handling in ComboboxInput component (#3065, #3073)
• Fix enter transitions in Transition component (#3074)
• Fix focus handling in ListboxOptions and MenuItems components (#3112)
• Fix horizontal scrolling inside the Dialog component (#2889)

Changed

• Require React 18 (#2887, #3092, #3131)
• Always render hidden form input fields for Checkbox, Switch and RadioGroup components (#3095)
• Deprecate the RadioGroup.Option component in favor of new Radio component (#2887)
• Deprecate the active prop in favor of new focus prop (#2887)
• Dialog is now focused by default instead of the first focusable element (#2887)
• Change default tags for ListboxOptions, ListboxOption, ComboboxOptions, ComboboxOption, and TabGroup components (#3109)
• Change default tag from div to Fragment on Transition components (#3110, #3147)
• Allow Combobox component to have null value (#3064, #3100)
• Attempt form submission when pressing enter on the ListboxButton component (#2972)
• Deprecate the entered prop on the Transition component (#3089)
• Add frozen value to ComboboxOptions component (#3126)

Upgrading from v1

Update dependencies

Install the latest version of the package via npm:

npm install @headlessui/react@latest

Default element changes

The default rendered element has changed for a number of components in v2.0:

Component	v1.x element	v2.0 element
Transition	div	Fragment
TransitionChild	div	Fragment
ListboxOptions	ul	div
ListboxOption	li	div
ComboboxOptions	ul	div
ComboboxOption	li	div
TabGroup	Fragment	div

If you are using any of these components without the as prop, you'll need to add the as prop and render the component with the element you need:

- <Transition ...>
+ <Transition as="div" ...>

Comboboxes now always support empty values

Previously the Combobox component required an option to always be set, and you could opt out of this behavior using the nullable prop. In v2.0 comboboxes support empty values by default so you can remove this prop:

- <Combobox value={selected} onChange={setSelected} nullable>
+ <Combobox value={selected} onChange={setSelected}>

If you'd like to keep the previous behavior, update your onChange callback to only set the selected value if an option has actually been selected:

 <Combobox
   value={selected}
-  onChange={setSelected}
+  onChange={(newValue) => setSelected((oldValue) => newValue ?? oldValue)}
   onClose={() => setQuery('')}
 >

Dialogs...