ReferenceComponentsLayout and panes
SplitPane
SplitPane component API, behavior, and executable example.
Loading executable example…
API and events
Build capability-aware rows, columns, bounded containers, split panes, and keyboard-resizable regions.
export function SplitPane({
panes,
orientation = "horizontal",
sizes,
defaultSizes,
onSizesChange,
resizeStep = 5,
showHelp = true,
autoFocus,
slots,
slotProps,
disabled = false,
readOnly = false,
...props
}: SplitPaneProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
panes | readonly SplitPaneItem[] | Yes | The panes member uses the readonly SplitPaneItem[] contract. | — |
orientation | "horizontal" | "vertical" | undefined | No | The orientation member uses the "horizontal" | "vertical" | undefined contract. | — |
sizes | readonly number[] | undefined | No | The sizes member uses the readonly number[] | undefined contract. | — |
defaultSizes | readonly number[] | undefined | No | The defaultSizes member uses the readonly number[] | undefined contract. | — |
onSizesChange | ((sizes: readonly number[]) => void | Promise<void>) | undefined | No | The onSizesChange member uses the ((sizes: readonly number[]) => void | Promise<void>) | undefined contract. | — |
resizeStep | number | undefined | No | The resizeStep member uses the number | undefined contract. | — |
showHelp | boolean | undefined | No | The showHelp member uses the boolean | undefined contract. | — |
autoFocus | boolean | undefined | No | The autoFocus member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
className | string | undefined | No | The className member uses the string | undefined contract. | — |
layout | Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined | No | The layout member uses the Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
role | SemanticRole | undefined | No | The role member uses the SemanticRole | undefined contract. | SemanticRole |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
selected | boolean | undefined | No | The selected member uses the boolean | undefined contract. | — |
checked | boolean | undefined | No | The checked member uses the boolean | undefined contract. | — |
expanded | boolean | undefined | No | The expanded member uses the boolean | undefined contract. | — |
valueText | string | undefined | No | The valueText member uses the string | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; }, { readonly focused: boolean; readonly activeDivider: number; readonly sizes: readonly number[]; }>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; }, { readonly focused: boolean; readonly activeDivider: number; readonly sizes: readonly number[]; }>> | undefined contract. | BoxProps, SlotProps, TextProps |
ResizablePane reports size changes through onSizeChange; other layout components are passive.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Resizable panes consume scoped arrow-key input while passive layout primitives only project Ink layout props.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { SplitPane } from "@/components/tuil/primitives/box";