For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/resizable.md.
Design System

    Resizable

    A layout primitive that splits a view into resizable panels separated by draggable handles. Wraps react-resizable-panels with design-system styling.

    Source · Storybook

    Usage

    import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@wallarm-org/design-system/Resizable';

    Examples

    Vertical

    Two panels stacked vertically.

    Three panels

    Three panels with two resize handles.

    Nested

    A horizontal group with a vertical sub-group nested inside one panel.

    Collapsible

    A panel that can be collapsed by dragging past its minimum size. Double-click the handle to reset.

    With constraints

    Panels with minimum and maximum size constraints.

    With tooltip

    A "Drag to resize" tooltip appears on hover, like the Drawer resize handle.

    With overflow list

    Resizing with content that reflows — the tag list adapts live as the panel width changes. Overflow items appear in a popover.

    Props

    ResizableHandle

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    disabledboolean | undefinedWhen disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled.
    disableDoubleClickboolean | undefinedWhen true, double-clicking this Separator will not reset its Panel to its default size.
    data-testidstring | undefined

    ResizablePanel

    PropTypeDefaultDescription
    idstring | undefinedUnique panel identity for layout persistence.
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    disabledboolean | undefinedWhen disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
    onResizecomplexCalled when panel sizes change.
    collapsedSizestring | number | undefinedPanel size when collapsed; defaults to 0%.
    collapsibleboolean | undefinedThis panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified minSize
    defaultSizestring | number | undefinedDefault size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. defaultSize={200} is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. defaultSize="50" is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.
    groupResizeBehavior"preserve-relative-size" | "preserve-pixel-size" | undefinedHow should this Panel behave if the parent Group is resized? Defaults to preserve-relative-size. - preserve-relative-size: Retain the current relative size (as a percentage of the Group) - preserve-pixel-size: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with preserve-relative-size resize behavior.
    maxSizestring | number | undefinedMaximum size of Panel within its parent group; defaults to "100%". ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. maxSize={200} is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. maxSize="50" is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
    minSizestring | number | undefinedMinimum size of Panel within its parent group; defaults to 0%. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. minSize={200} is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. minSize="50" is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
    panelRefcomplexExposes the following imperative API: - collapse(): void - expand(): void - getSize(): number - isCollapsed(): boolean - resize(size: number): void ℹ️ The usePanelRef and usePanelCallbackRef hooks are exported for convenience use in TypeScript projects.
    data-testidstring | undefined

    ResizablePanelGroup

    PropTypeDefaultDescription
    autoSaveIdstring | undefinedUnique id for layout persistence via localStorage.
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    disabledboolean | undefinedDisable resize functionality.
    orientation"vertical" | "horizontal" | undefinedhorizontalSpecifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"
    defaultLayoutcomplexDefault layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.
    groupRefcomplexExposes the following imperative API: - getLayout(): Layout - setLayout(layout: Layout): void ℹ️ The useGroupRef and useGroupCallbackRef hooks are exported for convenience use in TypeScript projects.
    onLayoutChangecomplexCalled when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the onLayoutChanged callback instead.
    onLayoutChangedcomplexCalled after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api. ℹ️ The second argument contains meta information about the layout change. The isUserInteraction attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.) The requestedLayout attribute is the layout before constraints were applied for the current Group size; prefer it when persisting layouts.
    data-testidstring | undefined

    Explorer