//
A panel that slides out from the edge of the screen, typically used for temporary navigation or supplementary content.
bun add xiod-ui1import {2 Drawer,3 DrawerTrigger,4 DrawerClose,5 DrawerSwipeArea,6 DrawerBackdrop,7 DrawerViewport,8 DrawerPopup,9 DrawerHeader,10 DrawerFooter,11 DrawerTitle,12 DrawerDescription,13 DrawerPanel,14 DrawerBar,15 DrawerMenu,16 DrawerMenuItem,17 DrawerMenuSeparator,18 DrawerMenuGroup,19 DrawerMenuGroupLabel,20 DrawerMenuTrigger,21 DrawerMenuCheckboxItem,22 DrawerMenuRadioGroup,23 DrawerMenuRadioItem,24 DrawerCreateHandle,25 DrawerPortal,26 DrawerContent27} from "xiod-ui/drawer";1<Drawer>2 <DrawerTrigger />3 <DrawerMenuTrigger />4 <DrawerPopup>5 <DrawerHeader>6 <DrawerTitle />7 <DrawerDescription />8 <DrawerMenuGroupLabel />9 </DrawerHeader>10 <DrawerMenuGroup>11 <DrawerMenuItem />12 <DrawerMenuCheckboxItem />13 <DrawerMenuRadioItem />14 </DrawerMenuGroup>15 <DrawerMenuRadioGroup>16 <DrawerMenuItem />17 <DrawerMenuCheckboxItem />18 <DrawerMenuRadioItem />19 </DrawerMenuRadioGroup>20 <DrawerSwipeArea />21 <DrawerBackdrop />22 <DrawerViewport />23 <DrawerPanel />24 <DrawerBar />25 <DrawerMenu />26 <DrawerMenuSeparator />27 <DrawerPortal />28 <DrawerContent />29 <DrawerFooter>30 <DrawerClose />31 </DrawerFooter>32 </DrawerPopup>33</Drawer>| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean| undefined | - | Whether the drawer is currently open. |
defaultOpen | boolean| undefined | false | Whether the drawer is initially open. To render a controlled drawer, use the `open` prop instead. |
modal | boolean| "trap-focus"| undefined | true | Determines if the drawer enters a modal state when open. - `true`: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
onOpenChange | ((open: boolean, eventDetails: DrawerRootChangeEventDetails) => void)| undefined | - | Event handler called when the drawer is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | Event handler called after any animations complete when the drawer is opened or closed. |
disablePointerDismissal | boolean| undefined | false | Whether to prevent the drawer from closing on outside presses. For non-modal drawers, this also prevents the drawer from closing when focus moves outside of it. |
actionsRef | RefObject<DrawerRootActions| null>| undefined | - | A ref to imperative actions. - `unmount`: Manually unmounts the drawer. Call this after any externally controlled closing animation finishes. - `close`: Closes the drawer imperatively when called. |
handle | DrawerHandle<unknown>| undefined | - | A handle to associate the drawer with a trigger. If specified, allows detached triggers to control the drawer's open state. Can be created with the Drawer.createHandle() method. |
triggerId | string| null| undefined | - | ID of the trigger that the drawer is associated with. This is useful in conjunction with the `open` prop to create a controlled drawer. There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set). |
defaultTriggerId | string| null| undefined | - | ID of the trigger that the drawer is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer. |
children | ReactNode| PayloadChildRenderFunction<unknown> | - | The content of the drawer. |
swipeDirection | SwipeDirection| undefined | 'down' | The swipe direction used to dismiss the drawer. |
snapPoints | DrawerSnapPoint[]| undefined | - | Snap points used to position the drawer. Use numbers between 0 and 1 to represent fractions of the viewport height, numbers greater than 1 as pixel values, or strings in `px`/`rem` units (for example, `'148px'` or `'30rem'`). |
snapToSequentialPoints | boolean| undefined | false | Disables velocity-based snap skipping so drag distance determines the next snap point. |
snapPoint | DrawerSnapPoint| null| undefined | - | The currently active snap point. Use with `onSnapPointChange` to control the snap point. |
defaultSnapPoint | DrawerSnapPoint| null| undefined | - | The initial snap point value when uncontrolled. |
onSnapPointChange | ((snapPoint: DrawerSnapPoint| null, eventDetails: DrawerRootSnapPointChangeEventDetails) => void)| undefined | - | Callback fired when the snap point changes. |
position | DrawerPosition| undefined | bottom |
| Prop | Type | Default | Description |
|---|---|---|---|
handle | DrawerHandle<unknown>| undefined | - | A handle to associate the trigger with a drawer. Can be created with the Drawer.createHandle() method. |
payload | unknown | - | A payload to pass to the drawer when it is opened. |
id | string| undefined | - | 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). |
nativeButton | boolean| undefined | true | 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>`). |
className | string| ((state: DrawerTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
nativeButton | boolean| undefined | true | 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>`). |
className | string| ((state: DrawerCloseState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerCloseState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerCloseState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean| undefined | false | Whether the swipe area is disabled. |
swipeDirection | SwipeDirection| undefined | - | The swipe direction that opens the drawer. Defaults to the opposite of `Drawer.Root` `swipeDirection`. |
className | string| ((state: DrawerSwipeAreaState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerSwipeAreaState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerSwipeAreaState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
position | DrawerPosition| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
forceRender | boolean| undefined | false | Whether the backdrop is forced to render even when nested. |
className | string| ((state: DrawerBackdropState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerBackdropState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerBackdropState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DrawerViewportState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerViewportState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerViewportState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
position | DrawerPosition| undefined | - | |
variant | "default"| "straight"| "inset"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
initialFocus | boolean| RefObject<HTMLElement| null>| ((openType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | 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. |
finalFocus | boolean| RefObject<HTMLElement| null>| ((closeType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | 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. |
className | string| ((state: DrawerPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
showCloseButton | boolean| undefined | false | |
position | DrawerPosition| undefined | - | |
variant | "default"| "straight"| "inset"| undefined | default | |
showBar | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
allowSelection | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "bare"| undefined | default | |
allowSelection | boolean| undefined | true |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DrawerTitleState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerTitleState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerTitleState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DrawerDescriptionState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerDescriptionState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerDescriptionState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
scrollFade | boolean| undefined | true | |
scrollable | boolean| undefined | true | |
allowSelection | boolean| undefined | true |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
position | DrawerPosition| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "destructive"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
handle | DrawerHandle<unknown>| undefined | - | A handle to associate the trigger with a drawer. Can be created with the Drawer.createHandle() method. |
payload | unknown | - | A payload to pass to the drawer when it is opened. |
id | string| undefined | - | 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). |
nativeButton | boolean| undefined | true | 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>`). |
className | string| ((state: DrawerTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | The id of the input element. |
name | string| undefined | undefined | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form. |
checked | boolean| undefined | undefined | Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead. |
defaultChecked | boolean| undefined | false | Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
onCheckedChange | ((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Event handler called when the checkbox is ticked or unticked. |
readOnly | boolean| undefined | false | Whether the user should be unable to tick or untick the checkbox. |
required | boolean| undefined | false | Whether the user must tick the checkbox before submitting a form. |
indeterminate | boolean| undefined | false | Whether the checkbox is in a mixed state: neither ticked, nor unticked. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden `<input>` element. |
parent | boolean| undefined | false | Whether the checkbox controls a group of child checkboxes. Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group). |
uncheckedValue | string| undefined | - | The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior. |
value | string| undefined | - | 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". |
nativeButton | boolean| undefined | true | 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>`). |
style | CSSProperties| ((state: CheckboxRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: CheckboxRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| (ComponentRenderFn<HTMLProps, CheckboxRootState> & ReactElement<...>)| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "switch"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
readOnly | boolean| undefined | false | Whether the user should be unable to select a different radio button in the group. |
required | boolean| undefined | false | Whether the user must choose a value before submitting a form. |
name | string| undefined | - | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form. |
value | any | - | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. |
defaultValue | any | - | The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead. |
onValueChange | ((value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the value changes. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden input element. |
style | CSSProperties| ((state: RadioGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: RadioGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, RadioGroupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
valueReq | any | - | The unique identifying value of the radio in a group. |
disabled | boolean| undefined | - | Whether the component should ignore user interaction. |
required | boolean| undefined | - | Whether the user must choose a value before submitting a form. |
readOnly | boolean| undefined | - | Whether the user should be unable to select the radio button. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden input element. |
nativeButton | boolean| undefined | true | 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>`). |
style | CSSProperties| ((state: RadioRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: RadioRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| (ComponentRenderFn<HTMLProps, RadioRootState> & ReactElement<...>)| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
keepMounted | boolean| undefined | false | Whether to keep the portal mounted in the DOM while the popup is hidden. |
container | HTMLElement| ShadowRoot| RefObject<HTMLElement| ShadowRoot| null>| null| undefined | - | A parent element to render the portal element into. |
className | string| ((state: DrawerPortalState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerPortalState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DrawerPortalState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: DrawerContentState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: DrawerContentState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DrawerContentState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |