# Resizable

Panels that users can resize.

## How to use it

Set direction on the group and minSize/maxSize on panels. ResizableHandle supports keyboard interaction.



## Import


```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<ResizablePanelGroup direction="horizontal" style={{height:200,width:380,border:"1px solid var(--color-border)",borderRadius:8}}><ResizablePanel defaultSize={40} minSize={20}><div style={{padding:20}}>Navigation</div></ResizablePanel><ResizableHandle withHandle /><ResizablePanel minSize={20}><div style={{padding:20}}>Your workspace</div></ResizablePanel></ResizablePanelGroup>
```


## API: ResizablePanelGroup


```typescript
ResizablePanelGroup: ({ className, ...props }: ResizablePanelGroupProps) => React.JSX.Element
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| direction | "horizontal" \| "vertical" | Yes | Axis along which panels are arranged. |
| aria-label | string | No | Accessible name of the control. |
| autoSaveId | string \| null | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| dir | "auto" \| "ltr" \| "rtl" | No | Interface reading direction. |
| id | string \| null | No | Element identifier; associates labels and descriptions. |
| keyboardResizeBy | number \| null | No | See the published type. |
| onChange | ChangeEventHandler<keyof HTMLElementTagNameMap, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<keyof HTMLElementTagNameMap> | No | Action performed when the element is activated. |
| onLayout | PanelGroupOnLayout \| null | No | See the published type. |
| onSubmit | SubmitEventHandler<keyof HTMLElementTagNameMap> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| storage | PanelGroupStorage | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| tagName | "object" \| "a" \| "button" \| "div" \| "form" \| "h2" \| "h3" \| "img" \| "input" \| "label" \| "li" \| "nav" \| "ol" \| "p" \| "select" \| "span" \| "ul" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "blockquote" \| "body" \| "br" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "h1" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "ins" \| "kbd" \| "legend" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "meta" \| "meter" \| "noscript" \| "optgroup" \| "option" \| "output" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "search" \| "slot" \| "script" \| "section" \| "small" \| "source" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "var" \| "video" \| "wbr" | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: ResizablePanel


```typescript
ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement | HTMLDivElement | HTMLObjectElement | HTMLLinkElement | HTMLInputElement | HTMLBaseElement | HTMLMapElement | HTMLProgressElement | HTMLSelectElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
    className?: string;
    collapsedSize?: number | undefined;
    collapsible?: boolean | undefined;
    defaultSize?: number | undefined;
    id?: string;
    maxSize?: number | undefined;
    minSize?: number | undefined;
    onCollapse?: ResizablePrimitive.PanelOnCollapse;
    onExpand?: ResizablePrimitive.PanelOnExpand;
    onResize?: ResizablePrimitive.PanelOnResize;
    order?: number;
    style?: object;
    tagName?: keyof HTMLElementTagNameMap | undefined;
} & {
    children?: React.ReactNode | undefined;
} & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| collapsedSize | number | No | See the published type. |
| collapsible | boolean | No | Allow closing content or collapsing the panel. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultSize | number | No | Initial panel size. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| maxSize | number | No | Maximum panel size. |
| minSize | number | No | Minimum panel size. |
| onChange | ChangeEventHandler<HTMLDivElement \| HTMLElement \| HTMLButtonElement \| HTMLParagraphElement \| HTMLHeadingElement \| HTMLSpanElement \| HTMLImageElement \| HTMLLIElement \| HTMLAnchorElement \| HTMLOListElement \| HTMLInputElement \| HTMLTableElement \| HTMLLabelElement \| HTMLLegendElement \| HTMLFieldSetElement \| HTMLUListElement \| HTMLObjectElement \| HTMLLinkElement \| HTMLBaseElement \| HTMLMapElement \| HTMLProgressElement \| HTMLSelectElement \| HTMLFormElement \| HTMLAreaElement \| HTMLAudioElement \| HTMLQuoteElement \| HTMLBodyElement \| HTMLBRElement \| HTMLCanvasElement \| HTMLTableColElement \| HTMLDataElement \| HTMLDataListElement \| HTMLModElement \| HTMLDetailsElement \| HTMLDialogElement \| HTMLDListElement \| HTMLEmbedElement \| HTMLHeadElement \| HTMLHRElement \| HTMLHtmlElement \| HTMLIFrameElement \| HTMLMetaElement \| HTMLMeterElement \| HTMLOptGroupElement \| HTMLOptionElement \| HTMLOutputElement \| HTMLPreElement \| HTMLSlotElement \| HTMLScriptElement \| HTMLSourceElement \| HTMLStyleElement \| HTMLTemplateElement \| HTMLTableSectionElement \| HTMLTableCellElement \| HTMLTextAreaElement \| HTMLTimeElement \| HTMLTitleElement \| HTMLTableRowElement \| HTMLTrackElement \| HTMLVideoElement \| HTMLTableCaptionElement \| HTMLMenuElement \| HTMLPictureElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement \| HTMLElement \| HTMLButtonElement \| HTMLParagraphElement \| HTMLHeadingElement \| HTMLSpanElement \| HTMLImageElement \| HTMLLIElement \| HTMLAnchorElement \| HTMLOListElement \| HTMLInputElement \| HTMLTableElement \| HTMLLabelElement \| HTMLLegendElement \| HTMLFieldSetElement \| HTMLUListElement \| HTMLObjectElement \| HTMLLinkElement \| HTMLBaseElement \| HTMLMapElement \| HTMLProgressElement \| HTMLSelectElement \| HTMLFormElement \| HTMLAreaElement \| HTMLAudioElement \| HTMLQuoteElement \| HTMLBodyElement \| HTMLBRElement \| HTMLCanvasElement \| HTMLTableColElement \| HTMLDataElement \| HTMLDataListElement \| HTMLModElement \| HTMLDetailsElement \| HTMLDialogElement \| HTMLDListElement \| HTMLEmbedElement \| HTMLHeadElement \| HTMLHRElement \| HTMLHtmlElement \| HTMLIFrameElement \| HTMLMetaElement \| HTMLMeterElement \| HTMLOptGroupElement \| HTMLOptionElement \| HTMLOutputElement \| HTMLPreElement \| HTMLSlotElement \| HTMLScriptElement \| HTMLSourceElement \| HTMLStyleElement \| HTMLTemplateElement \| HTMLTableSectionElement \| HTMLTableCellElement \| HTMLTextAreaElement \| HTMLTimeElement \| HTMLTitleElement \| HTMLTableRowElement \| HTMLTrackElement \| HTMLVideoElement \| HTMLTableCaptionElement \| HTMLMenuElement \| HTMLPictureElement> | No | Action performed when the element is activated. |
| onCollapse | PanelOnCollapse | No | See the published type. |
| onExpand | PanelOnExpand | No | See the published type. |
| onResize | PanelOnResize | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLDivElement \| HTMLElement \| HTMLButtonElement \| HTMLParagraphElement \| HTMLHeadingElement \| HTMLSpanElement \| HTMLImageElement \| HTMLLIElement \| HTMLAnchorElement \| HTMLOListElement \| HTMLInputElement \| HTMLTableElement \| HTMLLabelElement \| HTMLLegendElement \| HTMLFieldSetElement \| HTMLUListElement \| HTMLObjectElement \| HTMLLinkElement \| HTMLBaseElement \| HTMLMapElement \| HTMLProgressElement \| HTMLSelectElement \| HTMLFormElement \| HTMLAreaElement \| HTMLAudioElement \| HTMLQuoteElement \| HTMLBodyElement \| HTMLBRElement \| HTMLCanvasElement \| HTMLTableColElement \| HTMLDataElement \| HTMLDataListElement \| HTMLModElement \| HTMLDetailsElement \| HTMLDialogElement \| HTMLDListElement \| HTMLEmbedElement \| HTMLHeadElement \| HTMLHRElement \| HTMLHtmlElement \| HTMLIFrameElement \| HTMLMetaElement \| HTMLMeterElement \| HTMLOptGroupElement \| HTMLOptionElement \| HTMLOutputElement \| HTMLPreElement \| HTMLSlotElement \| HTMLScriptElement \| HTMLSourceElement \| HTMLStyleElement \| HTMLTemplateElement \| HTMLTableSectionElement \| HTMLTableCellElement \| HTMLTextAreaElement \| HTMLTimeElement \| HTMLTitleElement \| HTMLTableRowElement \| HTMLTrackElement \| HTMLVideoElement \| HTMLTableCaptionElement \| HTMLMenuElement \| HTMLPictureElement> | No | Form submission event. |
| order | number | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | (CSSProperties & object) | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| tagName | "object" \| "a" \| "button" \| "div" \| "form" \| "h2" \| "h3" \| "img" \| "input" \| "label" \| "li" \| "nav" \| "ol" \| "p" \| "select" \| "span" \| "ul" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "blockquote" \| "body" \| "br" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "h1" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "ins" \| "kbd" \| "legend" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "meta" \| "meter" \| "noscript" \| "optgroup" \| "option" \| "output" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "search" \| "slot" \| "script" \| "section" \| "small" \| "source" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "var" \| "video" \| "wbr" | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: ResizableHandle


```typescript
declare function ResizableHandle({ className, withHandle, ...props }: ResizableHandleProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| hitAreaMargins | PointerHitAreaMargins | No | See the published type. |
| id | string \| null | No | Element identifier; associates labels and descriptions. |
| onBlur | (() => void) | No | See the published type. |
| onChange | ChangeEventHandler<keyof HTMLElementTagNameMap, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | (() => void) | No | Action performed when the element is activated. |
| onDragging | PanelResizeHandleOnDragging | No | See the published type. |
| onFocus | (() => void) | No | See the published type. |
| onPointerDown | (() => void) | No | See the published type. |
| onPointerUp | (() => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<keyof HTMLElementTagNameMap> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| tagName | "object" \| "a" \| "button" \| "div" \| "form" \| "h2" \| "h3" \| "img" \| "input" \| "label" \| "li" \| "nav" \| "ol" \| "p" \| "select" \| "span" \| "ul" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "blockquote" \| "body" \| "br" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "h1" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "ins" \| "kbd" \| "legend" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "meta" \| "meter" \| "noscript" \| "optgroup" \| "option" \| "output" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "search" \| "slot" \| "script" \| "section" \| "small" \| "source" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "var" \| "video" \| "wbr" | No | See the published type. |
| title | string | No | Title or supplementary information. |
| withHandle | boolean | No | Show a visual grip on the separator. |

Source: https://kivora.pro/docs/componentes/resizable