# ResizablePanels

Two panels separated by an accessible pointer and keyboard resize control.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, ResizablePanels, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ResizablePanels label="Resize workspace" main={<Text>Navigation</Text>} secondary={<Text>Workspace</Text>} style={{height:"16rem"}} />
    </FloodRoot>
  );
}
```

## Design notes

- Percentages describe the main pane and exclude the dedicated separator track. The host supplies content and scrolling.
- Drag the separator or use logical arrow keys, Home/End and Shift for large steps. Horizontal resizing follows RTL direction.
- value/onValueChange keeps the host in control. onValueCommit reports an accepted completed interaction; pointer cancellation restores the initial uncontrolled size.
- The separator occupies space so its touch area does not overlap panel content. Persisting layout and larger panel graphs belong to the host. Introduced in 0.2.7.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `main` | `ReactNode` | `Required` |
| `secondary` | `ReactNode` | `Required` |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
| `value` | `number` | `—` |
| `defaultValue` | `number` | `50` |
| `onValueChange` | `(percent: number) => void` | `—` |
| `onValueCommit` | `(percent: number) => void` | `—` |
| `min` | `number` | `10` |
| `max` | `number` | `90` |
| `step` | `number` | `1` |
| `largeStep` | `number` | `10` |
| `disabled` | `boolean` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue" \| "onChange">` | `Forwarded` |