resizable

Panel group with drag handles. Visual + a11y only — pair with 10 lines of JS for actual resize.

status: visual-only js: consumer support: baseline

Preview

Markup

<div class="resizable" data-direction="horizontal"><div class="resizable-panel">A</div><div class="resizable-handle" tabindex="0" role="separator" aria-orientation="vertical" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div><div class="resizable-panel">B</div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/resizable.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add resizable

Accessibility

Visual layout; drag needs JS; handle: tabindex=0 role=separator aria-valuenow

Classes

.resizable .resizable-panel .resizable-handle

Dependencies

base/tokens