Splitter

Release candidate

Splitter divides window content into separate regions called split panels that can be dragged and resized, allowing users to customize the layout of their workspace.

Also known as: Resizable, Resizable panel

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best Practices

Set an Appropriate aria-label or aria-labelledby for SplitHandle:
Make sure to assign a meaningful and descriptive aria-label to the SplitHandle. This will help screen readers and other assistive technologies accurately convey the purpose of the handle to users.

Keyboard interactions

Keyboard interactions apply only to the SplitHandles, which will be a child of the Splitter component.

Key	Function
`ArrowUp`	Moves the handle up in a vertical splitter.
`ArrowDown`	Moves the handle down in a vertical splitter.
`ArrowLeft`	Moves the handle left in a horizontal splitter.
`ArrowRight`	Moves the handle right in a horizontal splitter.
`Enter`	If the associated split is not collapsed, collapses the split. If the split is collapsed, restores the splitter to it's previous position.
`Home`	Moves the handle of the vertical splitter as top as possible or as left as possible in the horizontal splitter. - Rules for min and max sizing are respected.
`End`	Moves the handle of the vertical splitter as bottom as possible or as right as possible in the horizontal splitter. - Rules for min and max sizing are respected.

Best Practices

Set an Appropriate aria-label or aria-labelledby for SplitHandle:
Make sure to assign a meaningful and descriptive aria-label to the SplitHandle. This will help screen readers and other assistive technologies accurately convey the purpose of the handle to users.

Keyboard interactions

Keyboard interactions apply only to the SplitHandles, which will be a child of the Splitter component.

Key	Function
`ArrowUp`	Moves the handle up in a vertical splitter.
`ArrowDown`	Moves the handle down in a vertical splitter.
`ArrowLeft`	Moves the handle left in a horizontal splitter.
`ArrowRight`	Moves the handle right in a horizontal splitter.
`Enter`	If the associated split is not collapsed, collapses the split. If the split is collapsed, restores the splitter to it's previous position.
`Home`	Moves the handle of the vertical splitter as top as possible or as left as possible in the horizontal splitter. - Rules for min and max sizing are respected.
`End`	Moves the handle of the vertical splitter as bottom as possible or as right as possible in the horizontal splitter. - Rules for min and max sizing are respected.

Best Practices

Set an Appropriate aria-label or aria-labelledby for SplitHandle:
Make sure to assign a meaningful and descriptive aria-label to the SplitHandle. This will help screen readers and other assistive technologies accurately convey the purpose of the handle to users.

Keyboard interactions

Keyboard interactions apply only to the SplitHandles, which will be a child of the Splitter component.

Key	Function
`ArrowUp`	Moves the handle up in a vertical splitter.
`ArrowDown`	Moves the handle down in a vertical splitter.
`ArrowLeft`	Moves the handle left in a horizontal splitter.
`ArrowRight`	Moves the handle right in a horizontal splitter.
`Enter`	If the associated split is not collapsed, collapses the split. If the split is collapsed, restores the splitter to it's previous position.
`Home`	Moves the handle of the vertical splitter as top as possible or as left as possible in the horizontal splitter. - Rules for min and max sizing are respected.
`End`	Moves the handle of the vertical splitter as bottom as possible or as right as possible in the horizontal splitter. - Rules for min and max sizing are respected.