# nord-resizable > Resizable coordinates an alternating sequence of panels and handles using > immutable percentage layouts and native pointer/keyboard interactions. ## Usage This section includes guidelines for designers and developers about using this component in different contexts. > **Do:** - Use Resizable when two or more persistent regions benefit from user-controlled space. - Give every panel a stable `panel-id` and realistic percentage constraints. - Place panels and handles as a direct alternating sequence. - Keep important controls usable at every permitted size and provide a meaningful handle `label` when “Resize panels” is too general. - Echo `event.layout.map(({ size }) => size)` back to the `layout` property when using controlled state. > **Don't:** - Don’t use Resizable for disclosure that should be a Drawer, Collapsible, or responsive layout change. - Don’t put panels or handles inside wrapper elements; registration is intentionally direct-child only. - Don’t add mouse-only drag instructions. Every enabled handle implements the keyboard window-splitter pattern. - Don’t assume `nord-resize` committed a controlled layout until the consumer supplies the next `layout` value. ## Composition and sizing Panel sizes are normalized percentages of the usable group axis after fixed handle tracks are excluded. `min-size`, `max-size`, `default-size`, and `collapsed-size` are percentages. Constraints are applied deterministically and the last valid layout is retained if a dynamic composition becomes unsatisfiable. Set `--n-resizable-inline-size` and `--n-resizable-block-size` when the surrounding layout does not already give the group definite dimensions. Panel content remains consumer-owned light DOM and is never stamped, moved, or recreated. ## Controlled state and events Omit `layout` for uncontrolled state, optionally supplying `defaultLayout` through JavaScript. Setting the `layout` property enables controlled state: pointer, keyboard, and programmatic interactions emit a proposed immutable layout while rendered sizes wait for the next property value. `nord-resize-start` and `nord-resize` are cancelable. `nord-resize-end` pairs every accepted pointer lifecycle, including cancellation, capture loss, window blur, disabled state, or disconnect. Resize event records contain stable panel IDs, percentage sizes, and a `source` of `pointer`, `keyboard`, or `programmatic`. ## Accessibility Handles expose `role="separator"`, the correct ARIA orientation, controlled panel IDs, and feasible current/minimum/maximum values. The rendered `aria-valuenow` is rounded to at most two decimals for concise announcements while canonical layouts and resize events keep their six-decimal precision. Arrow keys resize by `keyboard-step`; Shift uses `large-keyboard-step`; Home and End move the primary panel to its nearest feasible boundary; Enter toggles a collapsible primary panel. The visible divider remains minimal while a `calc(var(--n-space-xl) + var(--n-space-s))` pseudo-element supplies an at-least-44 CSS pixel pointer target. Focus, hover, and active states use Nord semantic tokens, and horizontal pointer/keyboard behavior follows RTL direction. Set `dir="rtl"` on the group or an ancestor; panel order and horizontal pointer/Arrow intent mirror while vertical interaction stays direction-independent. Disabled handles are removed from sequential focus and expose disabled semantics. ## Examples ### Overview ```html

${panelContent( 'Conversation list', 'Select a conversation to open it.', )}

${panelContent('Messages', 'The main conversation workspace.')}

${panelContent( 'Details', 'A third persistent region completes the source overview.', )}

``` ### Vertical ```html

${panelContent( 'Preview', 'The same percentage model works on the block axis.', )}

${panelContent( 'Details', 'Arrow Up and Arrow Down resize this layout.', )}

``` ### Handle ```html

${panelContent( 'Sidebar', 'The visible grip makes the separator easier to discover.', )}

${panelContent( 'Content', 'The grip does not change the thin layout track or pointer target.', )}

``` ### R T L ```html

${panelContent('واحد', 'اللوحة الأولى')}

${panelContent('اثنان', 'اللوحة الثانية')}

${panelContent('ثلاثة', 'اللوحة الثالثة')}

``` ### Nested ```html

${panelContent('Folders', 'The outer primary panel.')}

${panelContent( 'Thread', 'The nested group owns an independent layout.', )}

${panelContent( 'Composer', 'Moving this separator does not resize folders.', )}

``` ### Constrained ```html

${panelContent('Queue', '15–35%')}

${panelContent('Conversation', '30–60%')}

${panelContent('Details', '20–40%')}

``` ### Collapsible ```html

${panelContent( 'Sidebar', 'Press Enter on the separator to collapse or restore.', )}

${panelContent( 'Content', 'Home also moves the sidebar to its collapsed size.', )}

``` ### Keyboard Only ```html

Focus the separator, then use Arrow keys, Shift + Arrow, Home, End, or Enter.

${panelContent( 'Primary', 'The controlled pane described by separator values.', )}

${panelContent( 'Secondary', 'Keyboard behavior follows orientation and direction.', )}

``` ### Controlled ```html

navigation: 40.0% · content: 60.0%

${panelContent( 'Navigation', 'The consumer owns the rendered layout property.', )}

${panelContent( 'Content', 'Resize events propose immutable percentage records.', )}

``` ## API Reference ### Properties - **orientation** (`ResizableOrientation`, default: `'horizontal'`) — Axis along which panels resize. - **keyboard-step** (`number`, default: `5`) — Percentage changed by an orientation-appropriate Arrow key. - **large-keyboard-step** (`number`, default: `10`) — Percentage changed by Shift plus an orientation-appropriate Arrow key. - **disabled** (`boolean`, default: `false`) — Disables every handle in the group. ### Events - **nord-resize-start** (`ResizableResizeStartEvent`) — Cancelable event dispatched before a pointer drag starts. - **nord-resize** (`ResizableResizeEvent`) — Cancelable event carrying an immutable ordered layout and interaction source. - **nord-resize-end** (`ResizableResizeEndEvent`) — Event dispatched whenever an accepted pointer drag terminates. ### Slots - **(default)** — Alternating Resizable Panel and Resizable Handle direct children. ### CSS Custom Properties - `--n-resizable-inline-size` (default: `100%`) — Controls the group inline size. - `--n-resizable-block-size` (default: `100%`) — Controls the group block size.