Components v5.0.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.See what's new

ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBanner Updated ButtonButton GroupCalendar Updated Card Updated Chart New Checkbox Updated Collapsible New Combobox New Command MenuDate Picker Updated Date Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInput Updated Input Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New Popout Updated ProgressProgress BarQrcodeRadio Updated Range Updated Resizable New Rich Text Editor New Scroll Area New Segmented ControlSelect Updated SkeletonSpinnerStackTabTableTagTextarea Updated Time Picker New Timestamp New ToastToggle Updated TooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

Resizable Handle Alpha Light DOM & Tailwind

Provides an accessible pointer and keyboard splitter between two Resizable panels.

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Resizable Handle belongs between two direct panels in a Resizable group. The group supplies orientation, controlled panel references, constraints, and current percentage values.

import "@nordhealth/components/lib/ResizableHandle"

Composition

Resizable Handle is the separator between two adjacent direct Resizable Panels. It receives orientation, panel identities, constraints, and current values from the parent group, and updates that shared layout rather than owning either panel's size.

Examples

Interaction

Pointer dragging uses capture so resizing continues outside the visible track. Orientation-appropriate Arrow keys resize by the group’s step, Shift plus Arrow uses the large step, Home and End move to feasible boundaries, and Enter toggles the primary collapsible panel. Add with-handle for a visible grip, or set disabled to remove pointer and keyboard resizing.

Accessibility

The handle is a focusable ARIA window splitter with localized “Resize panels” naming, aria-controls, matching separator orientation, and feasible minimum/current/maximum values. Set label when the default does not identify the affected regions. The visual divider remains thin while a token-derived hit area provides a usable target; focus, forced-colors, RTL, and reduced-motion states remain visible.

API reference

ResizableHandle

Resizable Handle is an accessible window splitter placed between two direct Resizable Panels.

<nord-resizable-handle></nord-resizable-handle>

Props

PropertyAttribute Description TypeDefault
disableddisabledDisables pointer and keyboard resizing and removes the handle from tab order.booleanfalse
withHandlewith-handleShows a centered Nord-token grip in addition to the minimal divider.booleanfalse
labellabelAccessible label. Defaults to a localized “Resize panels”.string''

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-resizable-handle-colorControls the divider color.var(--n-color-border)
--n-resizable-handle-active-colorControls hover, focus, and drag color.var(--n-color-accent)
--n-resizable-handle-target-sizeControls the interactive hit target without changing the layout track.calc(var(--n-space-xl) + var(--n-space-s))
Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.