# ResizableHandle

Draggable handle for resizing panels

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@databricks/appkit-ui/react"

export default function ResizableExample() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="max-w-md rounded-lg border md:min-w-[450px]"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={25}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

```

## ResizableHandle[​](#resizablehandle-1 "Direct link to ResizableHandle")

Draggable handle for resizing panels

**Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx)

### Props[​](#props "Direct link to Props")

| Prop             | Type                          | Required | Default | Description |
| ---------------- | ----------------------------- | -------- | ------- | ----------- |
| `disabled`       | `boolean`                     |          | -       | -           |
| `hitAreaMargins` | `PointerHitAreaMargins`       |          | -       | -           |
| `id`             | `string \| null`              |          | -       | -           |
| `onBlur`         | `(() => void)`                |          | -       | -           |
| `onClick`        | `(() => void)`                |          | -       | -           |
| `onDragging`     | `PanelResizeHandleOnDragging` |          | -       | -           |
| `onFocus`        | `(() => void)`                |          | -       | -           |
| `onPointerDown`  | `(() => void)`                |          | -       | -           |
| `onPointerUp`    | `(() => void)`                |          | -       | -           |
| `tagName`        | `enum`                        |          | -       | -           |
| `withHandle`     | `boolean`                     |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { ResizableHandle } from '@databricks/appkit-ui';

<ResizableHandle /* props */ />

```

## ResizablePanel[​](#resizablepanel "Direct link to ResizablePanel")

Individual resizable panel within a panel group

**Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop            | Type              | Required | Default | Description |
| --------------- | ----------------- | -------- | ------- | ----------- |
| `collapsedSize` | `number`          |          | -       | -           |
| `collapsible`   | `boolean`         |          | -       | -           |
| `defaultSize`   | `number`          |          | -       | -           |
| `id`            | `string`          |          | -       | -           |
| `maxSize`       | `number`          |          | -       | -           |
| `minSize`       | `number`          |          | -       | -           |
| `onCollapse`    | `PanelOnCollapse` |          | -       | -           |
| `onExpand`      | `PanelOnExpand`   |          | -       | -           |
| `onResize`      | `PanelOnResize`   |          | -       | -           |
| `order`         | `number`          |          | -       | -           |
| `tagName`       | `enum`            |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { ResizablePanel } from '@databricks/appkit-ui';

<ResizablePanel /* props */ />

```

## ResizablePanelGroup[​](#resizablepanelgroup "Direct link to ResizablePanelGroup")

Container for resizable panel layout

**Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop               | Type                         | Required | Default | Description |
| ------------------ | ---------------------------- | -------- | ------- | ----------- |
| `autoSaveId`       | `string \| null`             |          | -       | -           |
| `direction`        | `enum`                       | ✓        | -       | -           |
| `id`               | `string \| null`             |          | -       | -           |
| `keyboardResizeBy` | `number \| null`             |          | -       | -           |
| `onLayout`         | `PanelGroupOnLayout \| null` |          | -       | -           |
| `storage`          | `PanelGroupStorage`          |          | -       | -           |
| `tagName`          | `enum`                       |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { ResizablePanelGroup } from '@databricks/appkit-ui';

<ResizablePanelGroup /* props */ />

```