unstale

npm / @chakra-ui/react

@chakra-ui/react

What changed in @chakra-ui/react 3, from its official release notes, upgrade guides and advisories. Sources checked 2026-10-18.

6 breaking1 security60 new APIs and options2 performance16 behavior and defaults2 tooling129 fixes and other

See which of these apply to your code, ranked, in your agent:

npx @unstale/cli init

@unstale/cli on npm

@chakra-ui/react 3216 changes

Breaking changes 6

  • Runs a supplied onClick handler before closing the dialog, and no longer submits an ancestor form by default.

    3.37.0release notes

  • Runs a supplied onClick handler before closing the drawer, and no longer submits an ancestor form by default.

    3.37.0release notes

  • No longer submits an ancestor form when clicked.

    3.37.0release notes

  • Now represents the full per-level indent, including indent-size and half icon-size; zero fully removes nested indentation and custom values no longer receive an extra offset.

    3.37.0release notes

  • Pressing Enter no longer submits the form when an item is highlighted or a value is rejected by allowCustomValue: false.

    3.36.0release notes

  • The focus ring now appears only for :focus-visible, not on mouse click.

    3.36.0release notes

Security 1

  • Fixes an XSS vector in the hidden input-width measurement element by using textContent instead of parsing tag values as HTML.

    3.37.0release notes

New APIs and options 60

  • Adds a return-value generic so awaiting open() returns the value passed to close() instead of any; the generic defaults to unknown.

    3.37.0release notes

  • Accepts a content type parameter so toast title and description can use values other than ReactNode; the default remains ReactNode.

    3.37.0release notes

  • Lets Dialog and Drawer content mark the element to focus when an overlay opens, without using initialFocusEl and a ref.

    3.37.0release notes

  • Lets Dialog and Drawer content exclude an element from automatic focus selection when an overlay opens.

    3.37.0release notes

  • Adds a segmented date field for typing dates without a calendar, with locale-formatted keyboard-navigable segments, range selection, constraints, and time-only input support.

    3.37.0release notes

  • Lets portalled content remain inside the focus trap when it is not reachable through aria-controls or aria-expanded; getters resolve elements lazily.

    3.37.0release notes

  • Controls how kept-mounted content is hidden when closed: the default display-none mode keeps effects running, while activity uses React 19 Activity to pause them.

    3.37.0release notes

  • Adds configurable keyboard stepping while Shift is held; defaults to 10 times step, preserving existing arrow-key behavior.

    3.37.0release notes

  • Adds configurable keyboard stepping while Alt is held; defaults to step divided by 10, preserving existing arrow-key behavior.

    3.37.0release notes

  • Adds a Presence callback that runs when enter animations finish.

    3.37.0release notes

  • Adds configurable larger keyboard steps, applied with Shift and PageUp/PageDown; defaults to 10 times step.

    3.37.0release notes

  • The return value of createOverlay now has a has() method.

    3.36.1release notes

  • Placement-aware parts in Color Picker, Combobox, Date Picker, Hover Card, Menu, Popover, Select, and Tooltip expose data-side for placement-based styling.

    3.36.0release notes

  • Adds a draggable, resizable floating panel component with trigger, positioning, content, header, body, control, and resize parts.

    3.36.0release notes

  • Adds per-panel resizeBehavior with the "preserve-pixel-size" option.

    3.36.0release notes

  • Size props accept CSS units including px, em, rem, vh, and vw.

    3.36.0release notes

  • Adds Field.Item for multi-control fields, re-exported as FieldItem and Field.Item.

    3.35.0release notes

  • Adds the target prop for multi-control fields.

    3.35.0release notes

  • Adds keyboardPriority for Home/End and arrow keys, plus highlight-first, last, next, and previous controls.

    3.35.0release notes

  • The format prop accepts a function, enabling localized page text.

    3.35.0release notes

  • Fixes deletion, focus, and Home/End behavior, and adds enterKeyHint, autoSubmit, and sanitizeValue props.

    3.35.0release notes

  • Multiple triggers can share one popover instance; translation support and finalFocusEl and restoreFocus props are also added.

    3.35.0release notes

  • Adds CSS variable overrides for slide-from keyframe distances.

    3.35.0release notes

  • Adds CSS variable overrides for slide keyframe distances, including the distance from the top.

    3.35.0release notes

  • Adds CSS variable overrides for slide-to keyframe distances.

    3.35.0release notes

  • Adds allowDuplicates and sanitizeValue props, and supports enterKeyHint on mobile.

    3.35.0release notes

  • Exports the ComboboxSelectionDetails type in the Combobox namespace.

    3.34.0release notes

  • Adds a datepicker component for date selection.

    3.34.0release notes

  • Exports the ListboxScrollToIndexDetails type in the Listbox namespace.

    3.34.0release notes

  • Exports the ListboxSelectionDetails type in the Listbox namespace.

    3.34.0release notes

  • Exports the ListboxSelectionMode type in the Listbox namespace.

    3.34.0release notes

  • Exports the MenuValueChangeDetails type in the Menu namespace.

    3.34.0release notes

  • Exposes Select.List, enabling virtualization support.

    3.34.0release notes

  • Added the data-instant attribute for instant animations when switching between multiple tooltip triggers.

    3.33.0release notes

  • Added an overflow CSS variable for scroll fade effects.

    3.33.0release notes

  • Added an overflow CSS variable for scroll fade effects.

    3.33.0release notes

  • Added an overflow CSS variable for scroll fade effects.

    3.33.0release notes

  • Added an overflow CSS variable for scroll fade effects.

    3.33.0release notes

  • Added thumbCollisionBehavior to control thumb collision handling with none, push, or swap behavior.

    3.33.0release notes

  • Added isStepSkippable support for step validation.

    3.33.0release notes

  • Added isStepValid support for step validation.

    3.33.0release notes

  • Added onStepInvalid support for step validation.

    3.33.0release notes

  • Added a placeholder prop that shows when no tags exist.

    3.33.0release notes

  • A new Marquee component is available.

    3.32.0release notes

  • Add a CSS variable to configure the ActionBar offset from edges.

    3.31.0release notes

  • Add a placement variant to position the bar at bottom, bottom-start, or bottom-end.

    3.31.0release notes

  • Export the listbox slot recipe from Theme.

    3.31.0release notes

  • Add markerLabel to Slider component anatomy for theming marker labels.

    3.31.0release notes

  • Export a component for custom Slider marker label rendering.

    3.31.0release notes

  • Adds a border semantic token to all color palettes, improving outline component appearance.

    3.30.0release notes

  • Adds the autoSize prop for variable width or height slides.

    3.30.0release notes

  • Exports the FocusOutsideEvent type.

    3.30.0release notes

  • Exports the InteractOutsideEvent type.

    3.30.0release notes

  • Exports the PointerDownOutsideEvent type.

    3.30.0release notes

  • Introduces a resizable splitter component with Root, Panel, and ResizeTrigger parts.

    3.30.0release notes

  • Adds a carousel component for building carousel interfaces.

    3.29.0release notes

  • Adds collapsedHeight to control the collapsible content's dimensions in its collapsed state.

    3.28.0release notes

  • Adds collapsedWidth to control the collapsible content's dimensions in its collapsed state.

    3.28.0release notes

  • Adds getPageUrl for generating href attributes when using pagination as links.

    3.28.0release notes

  • Adds a component for entering multiple values as tags, with tag creation, deletion, and keyboard navigation.

    3.28.0release notes

Performance 2

  • No longer re-renders whenever its subtree mutates when helper and error text are unchanged.

    3.37.0release notes

  • Recipe components such as Button, Badge, and Skeleton render faster in large lists and tables through per-system recipe caching and memoized variant style resolution.

    3.36.1release notes

Behavior and default changes 16

  • Allows partial translations so applications can override individual messages and use defaults for the rest.

    3.37.0release notes

  • Accepts locale-native numerals when typing, not just ASCII digits.

    3.37.0release notes

  • After a pointer drag, the resize trigger no longer displays the focus ring from :focus-visible, while retaining focus for keyboard resizing.

    3.37.0release notes

  • FloatingPanel.Root now defaults minSize to { width: 240, height: 100 } to prevent resizing the panel to zero; pass your own minSize to override it.

    3.36.1release notes

  • Removes the input placeholder override so DatePicker placeholders use the same global *::placeholder styling as Input.

    3.36.0release notes

  • Multiple triggers can share one dialog instance.

    3.35.0release notes

  • Multiple triggers can share one hover card instance.

    3.35.0release notes

  • Dialog, Drawer, Menu, and HoverCard use a unified z-index with zIndex.popover and --layer-index for proper overlay stacking.

    3.32.0release notes

  • Improve focus ring styles for Slider.Thumb.

    3.31.0release notes

  • The outline variant uses colorPalette.border instead of colorPalette.muted or the global border token, with CSS variable fallbacks for backward compatibility.

    3.30.0release notes

  • The outline variant uses colorPalette.border instead of colorPalette.muted or the global border token, with CSS variable fallbacks for backward compatibility.

    3.30.0release notes

  • The outline variant uses colorPalette.border instead of colorPalette.muted or the global border token, with CSS variable fallbacks for backward compatibility.

    3.30.0release notes

  • The outline variant uses colorPalette.border instead of colorPalette.muted or the global border token, with CSS variable fallbacks for backward compatibility.

    3.30.0release notes

  • initialItems now accepts readonly arrays.

    3.30.0release notes

  • In modal mode, elements referenced by aria-controls can be included in the focus trap scope.

    3.28.0release notes

  • In modal mode, elements referenced by aria-controls can be included in the focus trap scope.

    3.28.0release notes

Tooling 2

Fixes and other changes 129

  • No longer causes unintended form submission when used inside a form.

    3.37.0release notes

  • Clicking a label no longer incorrectly adds data-focus-visible to the control.

    3.37.0release notes

  • Prevents the channel input from committing a partial value when Enter confirms an IME composition.

    3.37.0release notes

  • Prevents scrolling an item into view from causing pointerleave to be treated as a real hover and changing the highlighted item.

    3.37.0release notes

  • Fixes lagging segment text and dropped edits during typing or auto-advance, preserves wall-clock values with a custom formatter and no timeZone, and accepts locale-native numerals.

    3.37.0release notes

  • Fixes keyboard range selection to match pointer behavior, including restarting on a third date and resuming a range reopened with only a start date.

    3.37.0release notes

  • Corrects the view trigger's aria-label and announces dates inside a range as In range rather than Choose.

    3.37.0release notes

  • Disabled and read-only pickers no longer react to cell clicks, clear triggers, or presets; read-only retains roving-focus navigation and disabled pickers leave the tab order.

    3.37.0release notes

  • Enforces maxSelectedDates on month and year cells in multiple mode.

    3.37.0release notes

  • Respects minView, maxView, and defaultView when resolving the initial view instead of hardcoding the day-through-year range.

    3.37.0release notes

  • A controlled open prop is no longer overridden by defaultOpen.

    3.37.0release notes

  • Locks page scrolling behind an open overlay when html is the scroll container.

    3.37.0release notes

  • Locks page scrolling behind an open overlay when html is the scroll container.

    3.37.0release notes

  • Dialog, Drawer, Menu, and Popover now handle Escape immediately after opening instead of sometimes swallowing the keypress.

    3.37.0release notes

  • Closing a panel removes it from the stack so the next panel becomes topmost; focusing a panel raises its positioner above siblings.

    3.37.0release notes

  • Prevents scrolling an item into view from causing pointerleave to be treated as a real hover and changing the highlighted item.

    3.37.0release notes

  • Scroll duration now accounts for content size and actual translation distance, so speed remains consistent when content is narrower than the viewport.

    3.37.0release notes

  • Prevents scrolling an item into view from causing pointerleave to be treated as a real hover and changing the highlighted item.

    3.37.0release notes

  • Prevents the context trigger from flashing at the top-left on first right-click and fixes long-press context menus opening at (0,0).

    3.37.0release notes

  • Cmd/Ctrl with arrow keys now produces values on the step grid.

    3.37.0release notes

  • Prevents api.setValue from throwing when passed a number while formatOptions is set.

    3.37.0release notes

  • Closing an overlay no longer steals focus from an element focused by the app in the meantime; nested closing handles disconnected outer containers, and Escape restores the visible focus ring.

    3.37.0release notes

  • Tabbing out of portalled content now moves focus to the next tabbable element after the trigger instead of looping back into the content.

    3.37.0release notes

  • Semantic i and em elements now render in italics when preflight is enabled.

    3.37.0release notes

  • getDataUrl() and the download trigger now preserve overlays such as logos and badges in exported codes.

    3.37.0release notes

  • Clicking a label no longer incorrectly adds data-focus-visible to the control.

    3.37.0release notes

  • Resolves the optional Activity export at runtime and falls back to display-none when the React build does not expose it, avoiding Next.js 15 production build failures.

    3.37.0release notes

  • Prevents scrolling an item into view from causing pointerleave to be treated as a real hover and changing the highlighted item.

    3.37.0release notes

  • Cmd/Ctrl with arrow keys now produces values on the step grid.

    3.37.0release notes

  • Collapsed panels now size to collapsedSize instead of minSize, and keyboard resizing works when a resize trigger receives focus while hovered.

    3.37.0release notes

  • No longer submits an ancestor form when clicked.

    3.37.0release notes

  • No longer renders its children twice.

    3.37.0release notes

  • Clicking a label no longer incorrectly adds data-focus-visible to the control.

    3.37.0release notes

  • No longer causes unintended form submission when used inside a form.

    3.37.0release notes

  • Native form submissions now include current tags in FormData after tags are added, removed, or cleared.

    3.37.0release notes

  • Prevents height flicker when expanding the stack in overlap mode by measuring heights without the scale transform.

    3.37.0release notes

  • Fixes incorrect CSS prop application.

    3.36.1release notes

  • The outline-variant checked ring on RadioCard and CheckboxCard is drawn with an inset shadow so it is not clipped when a parent has overflow hidden, auto, or scroll.

    3.36.1release notes

  • Fixes incorrect CSS prop application.

    3.36.1release notes

  • Fixes incorrect CSS prop application.

    3.36.1release notes

  • Fixes custom className removing the base chakra-image class.

    3.36.1release notes

  • LinkOverlay now forwards the rel attribute to the rendered anchor instead of dropping it.

    3.36.1release notes

  • Recipe merging normalizes compiled and raw configs before combining them, preventing errors when composing recipe-based components through the chakra factory and avoiding mutation of source configs.

    3.36.1release notes

  • Fixes incorrect CSS prop application.

    3.36.1release notes

  • Item triggers no longer render redundant aria-disabled attributes.

    3.36.0release notes

  • onValueChangeEnd now fires when a color is picked with the EyeDropper API.

    3.36.0release notes

  • Fixes range-mode clearing so it resets active and hovered state.

    3.36.0release notes

  • Hovering an outside day no longer changes the visible month.

    3.36.0release notes

  • Fixes the native month/year select inside modals in Firefox.

    3.36.0release notes

  • Nested token overrides are normalized when merging the default theme; adding overrides such as colors.black.100 promotes the original colors.black value to DEFAULT and resolves nested tokens.

    3.36.0release notes

  • Fixes shared custom trigger elements being ignored and trigger lookups in shadow DOM.

    3.36.0release notes

  • Fixes the page being left uninteractive after closing in React 19 Strict Mode.

    3.36.0release notes

  • Token dictionary lookups preserve semantic token condition metadata.

    3.36.0release notes

  • Fixes blur behavior when the input is cleared and min is greater than 0.

    3.36.0release notes

  • Fixes data-filled being set on every input during the first render.

    3.36.0release notes

  • Fixes recipe definition types so defaultVariants accepts variant keys when using the broad RecipeDefinition type.

    3.36.0release notes

  • Clicking a resize trigger now moves focus to that trigger.

    3.36.0release notes

  • Returns the semantic CSS variable reference for semantic tokens with light/dark conditions instead of a dark-mode-resolved value.

    3.36.0release notes

  • Item trigger props now include the missing data-focus attribute.

    3.35.0release notes

  • Array shorthand is no longer mistaken for responsive arrays.

    3.35.0release notes

  • Fixes controlled carousels inside dialogs, navigation in transformed containers, scroll drift, and page synchronization with indicators.

    3.35.0release notes

  • Vertical slider orientation is corrected during pointer updates.

    3.35.0release notes

  • VoiceOver announces highlighted options on Apple devices using a live region.

    3.35.0release notes

  • Fixes body scroll locking and restores pointer-events correctly when overlays run under React StrictMode.

    3.35.0release notes

  • Fixes calendar popup clipping constrained by available height.

    3.35.0release notes

  • Exports the previously missing date picker slot recipe.

    3.35.0release notes

  • Prevents the panel from appearing behind the dimmed overlay when opening and closing quickly or with certain global z-index styles.

    3.35.0release notes

  • Prevents the panel from appearing behind the dimmed overlay when opening and closing quickly or with certain global z-index styles.

    3.35.0release notes

  • Array shorthand is no longer mistaken for responsive arrays.

    3.35.0release notes

  • Duplicate files are rejected with FILE_EXISTS.

    3.35.0release notes

  • Array shorthand is no longer mistaken for responsive arrays.

    3.35.0release notes

  • Responsive array values in selector rules such as #id or .class now generate responsive breakpoint styles instead of being serialized incorrectly.

    3.35.0release notes

  • Array shorthand is no longer mistaken for responsive arrays.

    3.35.0release notes

  • Fixes incorrect application of the CSS prop.

    3.35.0release notes

  • Rejects malformed CSS length values such as 1a5rem and 1-5rem.

    3.35.0release notes

  • Closed menus expose aria-expanded, submenu hover no longer flashes diagonally, and multiple triggers are supported.

    3.35.0release notes

  • Array shorthand is no longer mistaken for responsive arrays.

    3.35.0release notes

  • Uses a React 19-safe state-based implementation and compares values with Object.is for correct NaN and -0 behavior.

    3.35.0release notes

  • Fixes a TypeScript error when passing a ref to CheckboxGroup.

    3.34.0release notes

  • Fixes the default size so the icon stays aligned with error text instead of expanding when the error area is full width.

    3.34.0release notes

  • Element selectors matching utility shorthands, such as p, m, h, and w, are no longer silently ignored.

    3.34.0release notes

  • Individual checkbox props are no longer overridden by CheckboxGroup when rendering.

    3.33.0release notes

  • Overlay and floating elements no longer scroll out of view when horizontally scrolling long code lines.

    3.33.0release notes

  • Selecting black shades now updates the color in controlled mode.

    3.33.0release notes

  • Closing a nested dialog no longer incorrectly closes parent layers.

    3.33.0release notes

  • Submenu behavior is no longer glitchy when quickly hovering between trigger items.

    3.33.0release notes

  • Cursor positioning issues after clicking the label or scrubbing are fixed.

    3.33.0release notes

  • The next trigger is now disabled when count is 0.

    3.33.0release notes

  • Closing a nested popover no longer incorrectly closes parent layers.

    3.33.0release notes

  • Thumb dragging from the edge is fixed in contain alignment mode.

    3.33.0release notes

  • Fixed api.toggleChecked() not working.

    3.33.0release notes

  • The change event is now emitted after clearing a controlled textarea.

    3.33.0release notes

  • Initial focus is fixed when the first node or branch is disabled.

    3.33.0release notes

  • Backdrop blur now applies as expected when used with backdropFilter="auto".

    3.32.0release notes

  • The keyframe now animates width instead of height for horizontal collapse transitions.

    3.32.0release notes

  • The base value is now respected during server-side rendering.

    3.32.0release notes

  • Fix z-index stacking when ColorPicker is used inside dialogs.

    3.31.0release notes

  • Fix z-index stacking when Combobox is used inside dialogs.

    3.31.0release notes

  • Normalize base styles so shorthand properties do not overwrite variant styles.

    3.31.0release notes

  • Fix menu content backgrounds not rendering by using the full token path for the CSS variable.

    3.31.0release notes

  • Fix z-index stacking when Select is used inside dialogs.

    3.31.0release notes

  • Fix duplicated children when loading is set to false.

    3.31.0release notes

  • Fixes dragging after tab switches or scrolling, and mouse-wheel scrolling when allowMouseDrag is enabled.

    3.30.0release notes

  • Fixes onHighlightChange not firing when filtering produces no results.

    3.30.0release notes

  • Fixes focus stealing in controlled mode.

    3.30.0release notes

  • Removes problematic aria-hidden behavior.

    3.30.0release notes

  • Non-interactive children in the dropzone now open the file picker.

    3.30.0release notes

  • Fixes arrow direction in RTL layouts.

    3.30.0release notes

  • Fixes arrow direction in RTL layouts.

    3.30.0release notes

  • Fixes inconsistent data-focus-visible and data-focus attributes.

    3.30.0release notes

  • Fixes the indicator appearing before its rectangle is resolved when used with Tabs.

    3.30.0release notes

  • The indicator now updates when the tab list resizes during responsive reflow.

    3.30.0release notesrelease notes

  • Fixes the indicator appearing before its rectangle is resolved when used with Radio Group.

    3.30.0release notes

  • Long tags now truncate with an ellipsis instead of overflowing the container.

    3.30.0release notes

  • Fixes arrow direction in RTL layouts.

    3.30.0release notes

  • Improves padding management to prevent input text from overflowing onto triggers.

    3.29.0release notes

  • Adds the missing client directive to CodeBlock.

    3.29.0release notes

  • Fixes setting the initial checked state to indeterminate.

    3.28.0release notes

  • Ensures api.checkedState returns the correct checked state.

    3.28.0release notes

  • Fixes the dir prop so its value is applied correctly.

    3.28.0release notes

  • Fixes propagation of the initial value to inputValue for controlled single-select comboboxes.

    3.28.0release notes

  • Pressing Enter when no item is highlighted no longer calls event.preventDefault().

    3.28.0release notes

  • Fixes the cursor jumping to the end when typing in the middle with formatOptions such as style: "currency".

    3.28.0release notes

  • Fixes Cmd+Backspace and Cmd+Delete inserting "undefined" instead of clearing the field.

    3.28.0release notes

  • Fixes horizontal scrollbar positioning on Safari in RTL mode.

    3.28.0release notes

  • Fixes resize tracking so it observes the root element.

    3.28.0release notes

  • Fixes the accessibility violation caused by the required state not being set correctly on the trigger.

    3.28.0release notes

  • Fixes continued dragging when a slider is disabled during a drag operation.

    3.28.0release notes

  • Fixes inconsistent application of data-active when the disabled state changes at runtime.

    3.28.0release notes