UI components · Layout
Splitter
Also called: Resizable panels, Split pane, Resize handle, Split view
A draggable divider between two side-by-side panels. Drag it left and right (or up and down) to resize both sides. Common in editors and email apps.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstMake the page a two-column layout with a draggable divider. The file list on the left defaults to 280px, with a 200px minimum and 480px maximum, and the editor on the right fills the rest. The divider is normally a 1px gray line with an 8px hit area. On hover and while dragging, it turns into a 2px blue line with a col-resize cursor, and text selection is disabled during the drag. Double-clicking the divider resets it to 280px, and the width is saved to localStorage. Give the divider role="separator" and aria-valuenow, and let the left and right arrow keys move it 16px at a time. Below 768px wide, stack the columns and turn off dragging.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Splitter is what you need.
Use Splitter when
- Workspaces like code editors, design tools, and AI chat plus preview, where users need to see both areas
- Master-detail layouts like email and file managers, where the right width for the list and details varies by person
- Comparing two pieces of content side by side (old and new versions, source and translation), when users want to adjust how wide each is
Pick something else when
Narrow screens like phones, where there's no room side by side and precise dragging is hard
Regular browsing pages like marketing sites and articles, where users don't need to adjust the layout
When you only need to open and close a sidebar. A collapse button is simpler.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A hit area only 1px wide, so the mouse can barely grab it and users assume it can't be dragged
- 02
No minimum width, so one drag shrinks a pane to 0 and it can't be found again
- 03
Looking exactly like a plain divider line, with no handle and no cursor change, so users never learn it can be dragged
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Two or more panels side by side (or stacked), with a draggable divider between them. The divider often has a small grip handle in the middle.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A splitter divides an area into two or three panes with a thin divider between them. Hover over it and the cursor turns into a double arrow. Drag it to widen one side and shrink the other. The file tree and editor in a code editor, the message list and message body in an email app, the chat and preview in an AI tool all use it so users can decide which side gets more room. Many implementations also let you double-click the divider to reset the default width, and collapse a pane completely when dragged very narrow.
How it differs from a Divider: a divider is just a static line that separates content and can't move. A splitter's divider is a control you can drag. It's also not the collapse button on a Sidebar Menu. Collapsing only has two states, open and closed, while a splitter can stop at any width.
Give each pane a minimum and maximum width so it can't be dragged to nothing or squeeze the other side out. Save the width locally so it stays the same next time. The visible line can be thin, but the grab area should be at least 6–8px wide, and it should also work with the arrow keys. Phone screens are too narrow, so switch to a stacked layout or tabs and drop the dragging.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-splitter- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-splitter.el-splitter.arco-resizebox-split.n-split[data-slot="resizable-panel-group"][data-slot="resizable-handle"][data-panel-group][data-panel-resize-handle-id].SplitPane.gutter.gutter-horizontal.gutter.gutter-vertical[role="separator"][aria-valuenow][role="separator"][tabindex]
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
splittersplit-panesplit-panelsplit-viewresizableresizerresize-handleresizable-panel
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
SplitterSplitPaneResizablePanelGroupResizableHandlePanelResizeHandlePanelGroupAllotment
- Semantic tags and roles
A weak signal. It only counts together with other cues.
role=separator
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026