SplitterProps

Updated on Sep 5, 2025

Represents the options of the Splitter.

Name	Type	Default	Description
children?	React.ReactNode		Determines the children nodes.
className?	string		Sets additional classes to the component.
defaultPanes?	SplitterPaneProps[]		Sets the initial options of the Splitter panes (more information and examples). Can be used for uncontrolled state. jsx <Splitter defaultPanes={[{ size: '30%' }, { size: '70%' }]} />
id?	string		Sets the id property of the top div element of the component.
onChange?	(event: SplitterOnChangeEvent) => void		Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes. jsx <Splitter onChange={(event) => console.log(event.newState)} />
orientation?	"vertical" | "horizontal"	'horizontal'	Specifies the orientation of the panes within the Splitter (more information and examples). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically. jsx <Splitter orientation="vertical" />
panes?	SplitterPaneProps[]		Sets the options of the Splitter panes (more information and examples). Can be used for controlled state. jsx <Splitter panes={[{ size: '50%' }, { size: '50%' }]} />
style?	React.CSSProperties		Sets additional CSS styles to the component.