data/primitives/docs/overview/releases.mdx
<Description>Radix Primitives releases and their changelogs.</Description>
This release introduces a brand new primitive in preview: PasswordToggleField.
This new primitive provides components for rendering a password input alongside a button to toggle its visibility. Aside from its primary functionality, it also includes:
This API is currently unstable, and we hope you'll help us test it out! Import the primitive using the unstable_ prefix.
import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";
export function PasswordField() {
return (
<PasswordToggleField.Root>
<PasswordToggleField.Input />
<PasswordToggleField.Toggle>
<PasswordToggleField.Icon
visible={<EyeOpenIcon />}
hidden={<EyeClosedIcon />}
/>
</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
);
}
Provider, Trigger and BubbleInput parts to Checkbox (#3459)text and pass to the underlying input element (#3510)use-sync-external-store to ensure entrypoint is valid <PRLink id={3491} />This release introduces a brand new primitive in preview: OneTimePasswordField.
This new group of components are designed to implement a common design pattern for one-time password fields displayed as separate input fields for each character. This UI is deceptively complex to implement in such a way that interactions follow user expectations. The new primitive handles all of this complexity for you, including:
As this is a preview release, the API is currently unstable. We hope you'll help us test it out and let us know how it goes.
Import the primitive using the unstable_ prefix.
import { unstable_OneTimePasswordField as OneTimePasswordField } from "radix-ui";
export function Verify() {
return (
<OneTimePasswordField.Root>
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.HiddenInput />
</OneTimePasswordField.Root>
);
}
Primitive component by default. This will allow us to expose these components in a future release so users can better control this behavior in the future.useControllableState to enhance performance, reduce surface area for bugs, and log warnings when misusedpointerdown is fired on the trigger <PRLink id={3380} />crossOrigin in Avatar images <PRLink id={3261} />displayName for better debugging of slottable components <PRLink id={3441} />react and react-dom <PRLink id={3350} />SlotClone when the child is a Fragment <PRLink id={3229} />radix-ui package that exposes the latest version of all Radix Primitives from a single place. This tree-shakable entrypoint makes it easier to bring in whatever components you need and keep them up-to-date without worrying about conflicting or duplicate dependencies.aria-hidden and react-remove-scroll dependencies for the following components:
allowPinchZoom bug for trackpad users <PRLink id={3127} />referrerPolicy when checking the image loading status <PRLink id={2772} />defaultChecked unexpectedly changed for uncontrolled checkboxes <PRLink id={2135} />form prop to the bubble input element to fix non-parent form submissions <PRLink id={3161} />allowPinchZoom bug for trackpad users <PRLink id={3127} />form prop to the bubble input element to fix non-parent form submissions <PRLink id={3161} />asChild prop not working as expected on the Viewport <PRLink id={2945} />Viewport <PRLink id={2945} />form prop to the bubble input element to fix non-parent form submissions <PRLink id={3161} />form prop to each thumb's bubble input element to fix non-parent form submissions <PRLink id={3161} />form prop to the bubble input element to fix non-parent form submissions <PRLink id={3161} />hotkey is an empty array <PRLink id={2491} />CheckedState typeTooltipProviderProps typepackage.json. The corresponding packages that provide a Portal part also received a patch update. <PRLink id={2966} />Released minor versions for all primitives with the following changes:
react-remove-scroll dependency version to avoid double scrollbar bugs in edge cases <PRLink id={2776} />stopPropagation in onEscapeKeyDown if you need more control rendering Radix components within another component that closes on Escape key press.hideWhenDetached prop do not allow interactions with hidden content <PRLink id={2743} /> <PRLink id={2745} />Dialog.Title part is missing <PRLink id={2948} />Dialog.Description part is missing <PRLink id={2948} />disableOutsidePointerEvents propvalue={undefined} to represent an indeterminate state, matching the current practical behaviour <PRLink id={2947} />nonce prop to be able to pass CSP nonce to the inline styles <PRLink id={2728} />nonce prop to be able to pass CSP nonce to the inline styles <PRLink id={2728} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Popover nested inside Dialog not opening <PRLink id={2182} />scroll-behavior: smooth compatibility <PRLink id={2175} />"" value. Note that this is only a breaking change if you were using an option with a value of "". <PRLink id={2174} />Portal part types lying about accepting DOM props <PRLink id={2178} />Portal part types lying about accepting DOM props <PRLink id={2178} />Content on the fly <PRLink id={2092} />This release ensures all of our primitives are ESM compatible. We have also updated to the latest version of Floating UI for all of our popper-positioned primitives.
<PackageRelease name="All primitives" />@types/react phantom dependency) <PRLink id={1896} />--radix-popper-available-width is calculated correctly when using collisionBoundary <PRLink id={2032} />Slot can be used in a React Server Component <PRLink id={2116} />This release introduces a brand new primitive in preview: Form.
onCheckedChange type on ContextMenu.CheckboxItem <PRLink id={1778} />onCheckedChange type on DropdownMenu.CheckboxItem <PRLink id={1778} />onCheckedChange type on Menubar.CheckboxItem <PRLink id={1778} />This release introduces a brand new primitive: Menubar. It also adds support for a highly requested feature for Select: the ability to position the content in a similar way to Popover or DropdownMenu.
orientation prop, as well as RTL support with dir <PRLink id={1850} />position prop to Select.Content to enable popper positioning <PRLink id={1853} />disabled prop to ContextMenu.Trigger <PRLink id={1746} />pointerId in Cypress when running Firefox <PRLink id={1753} />ContextMenu.CheckboxItem. Note that this is only a breaking change if you are currently using the CheckboxItem part and your codebase is written in TypeScript. <PRLink id={1624} />DropdownMenu.CheckboxItem. Note that this is only a breaking change if you are currently using the CheckboxItem part and your codebase is written in TypeScript. <PRLink id={1624} />DropdownMenu.Trigger open state with aria-expanded when closed <PRLink id={1644} />asChild <PRLink id={1647} />useLabelContext and support for fully custom controls. For native labelling to work, ensure your custom controls are based on native elements such as button or input. <PRLink id={1686} />label element <PRLink id={1686} />delayDuration and skipDelayDuration props to NavigationMenu.Root. Note that by default, triggers now have a brief delay before opening in order to improve UX, this can be modified using the props provided. <PRLink id={1716} />disabled prop to RadioGroup.Root <PRLink id={1530} />RadioGroup.Root was focusable when all items were disabled <PRLink id={1530} />disabled prop to Select.Root <PRLink id={1699} />required prop to Select.Root <PRLink id={1598} />inverted prop on Slider.Root <PRLink id={1695} />onValueCommit prop to Slider.Root to better handle discrete value changes <PRLink id={1696} />ref assignments on child elements returning null <PRLink id={1668} />onPause and onResume props to Toast.Root <PRLink id={1669} />Toolbar.Item click handlers firing twice <PRLink id={1526} />With this release, we start following semantic versioning strictly. All primitives are now versioned <Badge size="1" color="yellow">1.0.0</Badge>.
We also move the Select, Toast and NavigationMenu from preview to stable.
DirectionProvider if you were relying on dir attribute inheritance from document (or any element). <PRLink id={1119} />allowPinchZoom prop, now defaults to true <PRLink id={1514} />forceMount on AlertDialog.Portal <PRLink id={1075} />allowPinchZoom prop, now defaults to true <PRLink id={1514} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1429} />offset on Arrow part <PRLink id={1531} />collisionTolerance to collisionPadding on Content part and accepts a number or a padding object <PRLink id={1531} />data-highlighted attribute to support styling <PRLink id={1388} />data-state attribute to Trigger part <PRLink id={1455} />collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part <PRLink id={1531} />allowPinchZoom prop, now defaults to true <PRLink id={1514} />forceMount on Dialog.Portal <PRLink id={1075} />allowPinchZoom prop, now defaults to true <PRLink id={1514} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1429} />offset on Arrow part <PRLink id={1531} />collisionTolerance to collisionPadding on Content part and accepts a number or a padding object <PRLink id={1531} />data-highlighted attribute to support styling <PRLink id={1388} />collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part <PRLink id={1531} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1426} />offset on Arrow part <PRLink id={1531} />collisionTolerance to collisionPadding on Content part and accepts a number or a padding object <PRLink id={1531} />collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part <PRLink id={1531} />NavigationMenu.Link <PRLink id={1347} />onSelect prop to NavigationMenu.Link <PRLink id={1372} />allowPinchZoom prop, now defaults to true <PRLink id={1514} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1425} />offset on Arrow part <PRLink id={1531} />collisionTolerance to collisionPadding on Content part and accepts a number or a padding object <PRLink id={1531} />collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part <PRLink id={1531} />z-index isn't managed anymore so you have full control of layering. The prop to provide a custom container evolves from containerRef (ref) to container (element). The data-radix-portal was removed because you can use asChild to control the element. <PRLink id={1463} />aria-required to root <PRLink id={1422} />ScrollArea.Thumb is now animatable <PRLink id={1392} />data-state values from active|inactive to checked|unchecked <PRLink id={1388} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1459} />asChild on Select.Content <PRLink id={1245} />Select.Content has padding <PRLink id={1312} />data-highlighted attribute to support styling <PRLink id={1388} />placeholder prop on Select.Value <PRLink id={1384} />Slottable <PRLink id={1376} />Tabs.Content <PRLink id={1346} />asChild <PRLink id={1300} />key prop <PRLink id={1283} />Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. <PRLink id={1427} />Tooltip.Content will remain open when hovering (WCAG 2.1 Content on Hover compliance). disableHoverableContent can be supplied to Tooltip.Provider to restore previous behavior <PRLink id={1490} />side on Tooltip.Content now defaults to top <PRLink id={1490} />Tooltip.Provider is now required, you must wrap your app to avoid regressions. <PRLink id={1490} />offset on Arrow part <PRLink id={1531} />collisionTolerance to collisionPadding on Content part and accepts a number or a padding object <PRLink id={1531} />collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part <PRLink id={1531} />This release introduces 3 brand new primitives in preview: Select, Toast and NavigationMenu, whilst also shipping a ton of fixes and improvements.
Accordion.Trigger <PRLink id={1085} />DropdownMenu.TriggerItem click from firing twice <PRLink id={1057} />Dialog.Title is now a required part so will throw an error if not used. aria-describedby={undefined} must be passed to Dialog.Content if no description is needed. <PRLink id={1098} />Dialog/AlertDialog <PRLink id={1097} />DropdownMenu.TriggerItem click from firing twice <PRLink id={1057} />Home and End keys <PRLink id={1076} />This release focuses on React 18 support and introduces a number of breaking changes to some packages, mostly related to portalling dialogs.
<PackageRelease name="All primitives" />IdProvider. Improves support for React 18 going forward and is no longer needed in older versions. Remove from your app to avoid deprecation warnings. <PRLink id={1006} />type and value props <PRLink id={979} />Accordion.Content height animation on initial page load <PRLink id={977} />Portal part. To avoid regressions, use this part if you want portalling behavior. <PRLink id={936} />AlertDialog.Overlay. Move allowPinchZoom to root. <PRLink id={963} />asChild TypeScript error <PRLink id={924} />Collapsible.Content height animation on initial page load <PRLink id={977} />Portal part. To avoid regressions, use this part if you want portalling behavior. <PRLink id={936} />Dialog.Overlay. Move allowPinchZoom to root. <PRLink id={963} />HoverCard when inside a dialog <PRLink id={920} />Tabs.Trigger to button element <PRLink id={981} />aria-orientation attribute on role=group element <PRLink id={965} />asChild TypeScript error <PRLink id={924} />toolbaritem role <PRLink id={950} />TooltipProvider part. You must wrap your app to avoid regressions. <PRLink id={1007} />type=button attribute from Tooltip.Trigger <PRLink id={1011} />key warnings <PRLink id={1015} />Accordion.Content to help with width animations <PRLink id={879} />Dialog <PRLink id={906} />AlertDialog.Content onInteractOutside prop <PRLink id={846} />AlertDialog <PRLink id={906} />DropdownMenu.Content via allowPinchZoom prop <PRLink id={884} />ContextMenu.Content via allowPinchZoom prop <PRLink id={884} />Collapsible.Content to help with width animations <PRLink id={879} />Tooltip <PRLink id={906} />DropdownMenu.Content via allowPinchZoom prop <PRLink id={884} />Popover.Content via allowPinchZoom prop <PRLink id={884} />0 <PRLink id={866} />Tabs.Content when tab is inactive <PRLink id={859} />as prop with asChild boolean prop. Learn more
about how to change the rendered element here <PRLink id={835} />DropdownMenu <PRLink id={818} />Dialog <PRLink id={818} />pointer-events when closed <PRLink id={819} />extendPrimitive utility <PRLink id={840} />AlertDialog.Content onPointerDownOutside prop <PRLink id={700} />modal prop <PRLink id={700} />ContextMenu.Content disableOutsidePointerEvents prop <PRLink id={700} />modal prop <PRLink id={700} />autofocus attribute on a child element <PRLink id={739} />modal prop <PRLink id={700} />DropdownMenu.Content disableOutsideScroll prop <PRLink id={700} />DropdownMenu.Content disableOutsidePointerEvents prop <PRLink id={700} />modal prop <PRLink id={700} />Popover.Content disableOutsideScroll prop <PRLink id={700} />Popover.Content disableOutsidePointerEvents prop <PRLink id={700} />Popover.Content trapFocus prop <PRLink id={700} />autofocus attribute on a child element <PRLink id={739} />data-state to ScrollBar part <PRLink id={801} />React.StrictMode <PRLink id={794} />Title and Description parts for simpler labelling <PRLink id={741} />data-orientation to Scrollbar for styling convenience <PRLink id={720} />forceMount type issue on Scrollbar <PRLink id={738} />Accordion.Button to Accordion.Trigger <PRLink id={651} />Accordion.Panel to Accordion.Content <PRLink id={651} />--radix-accordion-content-height) <PRLink id={651} />type=“single” Accordion now has a new collapsible prop which is false by default. This means that the default behavior has now changed. By default a user cannot close all items. <PRLink id={651} />onPointerDownOutside without inadvertently preventing focus <PRLink id={654} />onCheckedChange(event) is now onCheckedChange(checked: CheckedState) <PRLink id={672} />Checkbox onClick <PRLink id={672} />label <PRLink id={672} />label <PRLink id={672} />Collapsible.Button to Collapsible.Trigger <PRLink id={651} />ContextMenu.TriggerItem <PRLink id={682} />ContextMenu.Arrow <PRLink id={682} />dir prop for RTL support with submenus <PRLink id={682} />onPointerDownOutside without inadvertently preventing focus <PRLink id={654} />ContextMenu.Content side prop <PRLink id={658} />ContextMenu.Content align prop <PRLink id={658} />sideOffset on ContextMenu.Content before, you should now use alignOffset. This is to standardize vertical alignment for both root and sub-menus. <PRLink id={712} />onFocusOutside is now a custom event <PRLink id={671} />onPointerDownOutside without inadvertently preventing focus <PRLink id={654} />DropdownMenu.TriggerItem <PRLink id={682} />dir prop for RTL support with submenus <PRLink id={682} />onPointerDownOutside without inadvertently preventing focus <PRLink id={654} />onFocusOutside is now a custom event <PRLink id={671} />onPointerDownOutside without inadvertently preventing focus <PRLink id={654} />onFocusOutside is now a custom event <PRLink id={671} />onValueChange(event) is now onValueChange(value: string) <PRLink id={685} />RadioGroup.Item onCheckedChange prop <PRLink id={685} />Scrollbar mount/unmount can now be animated <PRLink id={624} />overflowX and overflowY props <PRLink id={624} />ScrollAreaButtonStart, ScrollAreaButtonEnd and ScrollAreaTrack <PRLink id={624} />scrollbarVisibility prop to type. The values are auto, always, scroll or hover <PRLink id={624} />scrollbarVisibilityRestTimeout prop to scrollHideDelay <PRLink id={624} />trackClickBehavior prop as we've removed built-in animation. Clicking on track always snaps to pointer position <PRLink id={624} />ScrollAreaScrollbarX and ScrollAreaScrollbarY are now <ScrollAreaScrollbar orientation="horizontal" /> and <ScrollAreaScrollbar orientation="vertical" /> <PRLink id={624} />onCheckedChange(event) is now onCheckedChange(checked: boolean) <PRLink id={679} />label <PRLink id={679} />Tabs.Tab to Tabs.Trigger <PRLink id={652} />Tabs.Panel to Tabs.Content <PRLink id={652} />readOnly prop <PRLink id={600} />onOpenChange prop <PRLink id={604} />anchorRef prop <PRLink id={580} />anchorRef prop and replace with optional Anchor part <PRLink id={580} />orientation, dir, loop props <PRLink id={618} />readOnly prop <PRLink id={600} />readOnly prop <PRLink id={600} />orientation, dir, loop props <PRLink id={618} />anchorRef prop <PRLink id={580} />Content closes when it has multiple close animations <PRLink id={571} />ToggleButton primitive to Toggle <PRLink id={546} />toggled prop to pressed <PRLink id={546} />defaultToggled prop to defaultPressed <PRLink id={546} />onToggledChange prop to onPressedChange <PRLink id={546} />selector prop and data-radix-* atributes <PRLink id={517} />type prop is required <PRLink id={527} />step is rounded correctly <PRLink id={463} />dir prop) <PRLink id={497} /><Trigger as={Slot}> <PRLink id={461} />onCloseAutoFocus prop <PRLink id={456} />onCloseAutoFocus prop <PRLink id={456} />as prop <PRLink id={421} />name prop from Item to Root <PRLink id={424} />children <PRLink id={414} />children <PRLink id={414} />selector prop <PRLink id={347} />disabled={false} on Root doesn't enable disabled items <PRLink id={400} />Content repositions on window resize <PRLink id={359} />Content triggers blur event <PRLink id={395} />