A handle to associate the trigger with a drawer. Can be created with the Drawer.createHandle() method.

ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for drawers in controlled mode (with the Drawer.Root triggerId prop).

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

A payload to pass to the drawer when it is opened.

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Whether the swipe area is disabled.

The edge the swipe area sits along. Defaults to the Drawer's position.

The swipe direction that opens the drawer. Defaults to the opposite of Drawer.Root swipeDirection.

Whether the backdrop is forced to render even when nested.

The edge of the screen the popup is laid out against. DrawerPopup renders its own viewport, so set this only when composing the parts yourself.

The popup's shape: default rounds the corners on the inner edge, straight keeps them square, and inset floats the popup away from the screen edges with every corner rounded, from the sm breakpoint up.

Whether to dim the page behind the drawer.

Extra classes for the backdrop.

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

Determines the element to focus when the drawer is closed.

• false: Do not move focus.
• true: Move focus based on the default behavior (trigger or previously focused element).
• RefObject: Move focus to the ref element.
• function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.

Determines the element to focus when the drawer is opened.

• false: Do not move focus.
• true: Move focus based on the default behavior (first tabbable element or popup).
• RefObject: Move focus to the ref element.
• function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.

Replaces the built-in text of this drawer. Takes precedence over LabelsProvider.

The edge the popup slides in from. Defaults to the Drawer's position.

Whether to show the grab bar along the popup's inner edge.

Whether to show a close button in the top corner.

The popup's shape: default rounds the corners on the inner edge, straight keeps them square, and inset floats the popup away from the screen edges with every corner rounded, from the sm breakpoint up.

Whether text in the header can be selected with a mouse. When false, dragging on it with a mouse swipes the drawer instead.

Whether text in the footer can be selected with a mouse. When false, dragging on it with a mouse swipes the drawer instead.

The popup's shape: default rounds the corners on the inner edge, straight keeps them square, and inset floats the popup away from the screen edges with every corner rounded, from the sm breakpoint up.

Whether text in the panel can be selected with a mouse. When false, dragging on it with a mouse swipes the drawer instead.

Whether the panel scrolls its content when it doesn't fit.

Whether the content fades out at an edge that has more to scroll to.

The edge the drawer slides in from, which decides where the bar sits and which way it points. Defaults to the Drawer's position.

The popup's shape: default rounds the corners on the inner edge, straight keeps them square, and inset floats the popup away from the screen edges with every corner rounded, from the sm breakpoint up.

A handle to associate the trigger with a drawer. Can be created with the Drawer.createHandle() method.

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for drawers in controlled mode (with the Drawer.Root triggerId prop).

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

A payload to pass to the drawer when it is opened.

Whether the checkbox is currently ticked.

To render an uncontrolled checkbox, use the defaultChecked prop instead.

Whether the checkbox is initially ticked.

To render a controlled checkbox, use the checked prop instead.

Whether the component should ignore user interaction.

Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.

Replaces the check icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

The id of the input element.

Whether the checkbox is in a mixed state: neither ticked, nor unticked.

A ref to access the hidden <input> element.

Identifies the field when a form is submitted.

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

Event handler called when the checkbox is ticked or unticked.

Whether the checkbox controls a group of child checkboxes.

Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).

Whether the user should be unable to tick or untick the checkbox.

Whether the user must tick the checkbox before submitting a form.

The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.

The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to name when omitted. When submitting a form, a checked box submits value; with no value, it submits the native "on".

The popup's shape: default rounds the corners on the inner edge, straight keeps them square, and inset floats the popup away from the screen edges with every corner rounded, from the sm breakpoint up.

The uncontrolled value of the radio button that should be initially selected.

To render a controlled radio group, use the value prop instead.

Whether the component should ignore user interaction.

Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.

A ref to access the hidden input element.

Identifies the field when a form is submitted.

Callback fired when the value changes.

Whether the user should be unable to select a different radio button in the group.

Whether the user must choose a value before submitting a form.

The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the defaultValue prop instead.

The unique identifying value of the radio in a group.

Whether the component should ignore user interaction.

A ref to access the hidden input element.

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

Whether the user should be unable to select the radio button.

Whether the user must choose a value before submitting a form.

A parent element to render the portal element into.

Whether to keep the portal mounted in the DOM while the popup is hidden.