ResizablePanel

ResizablePanelGroup composes one or more ResizablePanels separated by ResizableHandles. Drag a handle to redistribute size between adjacent panels — useful for sidebars, split editors, and multi-pane product surfaces.

#Default usage

<Card>
  <ResizablePanelGroup>
    <ResizablePanel defaultSize={32} minSize={20}>
      <VStack padding={24}><Text>Sidebar</Text></VStack>
    </ResizablePanel>
    <ResizableHandle index={0} aria-label="Resize sidebar" />
    <ResizablePanel defaultSize={68}>
      <VStack padding={24}><Text>Main</Text></VStack>
    </ResizablePanel>
  </ResizablePanelGroup>
</Card>

#Import

import { Card, ResizableHandle, ResizablePanel, ResizablePanelGroup, Text, VStack } from "@froggdesign/enter-ui-react";

#Accessibility

Each handle renders role="separator" with aria-orientation perpendicular to the group direction: a horizontal panel group has vertical separators, and a vertical group has horizontal separators. Give each handle an aria-label or aria-labelledby. Tab to a handle, then use Left/Right in horizontal groups or Up/Down in vertical groups. Arrow keys move by one percentage point; Shift+Arrow moves by ten. Home and End move to the available minimum and maximum. Both adjacent panels' limits are respected, and aria-valuenow, aria-valuemin, and aria-valuemax follow the current sizes. aria-controls identifies the preceding panel.

Custom onKeyDown and onPointerDown handlers run first. Call event.preventDefault() to cancel the built-in action.

#API

• ResizablePanelGroup: direction (horizontal default, vertical).
• ResizablePanel: defaultSize (percent), minSize, maxSize. Set initial sizes to total 100; sizes divide the space remaining after the handles. Limits apply to both adjacent panels while resizing.
• ResizableHandle: index (handle position; required when more than one handle).

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.