SplitView – Once UI

The SplitView component creates a resizable divider between two panels, allowing users to adjust the size ratio. It supports both horizontal and vertical layouts with customizable resize handles.

SplitView

Left PanelThis is the left panel content. You can resize this panel by dragging the divider.

<SplitView 
  defaultSplit={0.4}
  leftPanel={
    <Column fillWidth padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Left Panel</Text>
      <Text onBackground="neutral-weak">
        This is the left panel content. You can resize this panel by dragging the divider.
      </Text>
    </Column>
  }
  rightPanel={
    <Column fillWidth padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Right Panel</Text>
      <Text onBackground="neutral-weak">
        This is the right panel content. The divider is draggable and provides visual feedback.
      </Text>
    </Column>
  }
/>

Vertical Layout

SplitView also supports vertical orientation for top-bottom layouts.

Vertical SplitView

Top PanelThis is the top panel in a vertical split layout.

<SplitView
  defaultSplit={0.3}
  direction="column"
  leftPanel={
    <Column fill padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Top Panel</Text>
    </Column>
  }
  rightPanel={
    <Column fill padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Bottom Panel</Text>
    </Column>
  }
/>

Customization

You can customize the resize handle size, appearance, and set minimum/maximum split ratios.

Customized SplitView

Custom HandleThis split view uses a custom handle size and background color.

<SplitView 
  defaultSplit={0.5}
  minSplit={0.2}
  maxSplit={0.8}
  leftPanel={
    <Column fillWidth padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Custom Handle</Text>
    </Column>
  }
  rightPanel={
    <Column fillWidth padding="20" gap="12" border="surface" background="surface" radius="l">
      <Text variant="heading-strong-m">Constrained</Text>
    </Column>
  }
/>

API reference

Prop	Type	Default
leftPanelrequired Content on the left.	ReactNode	—
rightPanelrequired Content on the right.	ReactNode	—
labels Tab labels used once the view has collapsed.	{ left: string; right: string }	—
collapseBelow Breakpoint at which it becomes tabs. false keeps it split at every width.	BreakpointKeyfalse	s
defaultSplit Starting position of the divider, as a fraction.	number	0.3
minSplit How far left the divider can go.	number	0.2
maxSplit How far right the divider can go.	number	0.8
…and every FlexProps prop	inherited	—

Small screens

At or below collapseBelow (default s) the split becomes tabs showing one panel at a time, and the drag handle is not rendered. A drag-resizable split is a poor pattern on a phone whichever way it is oriented: neither pane is usable at any ratio, and a drag handle competes with page scrolling. Pass labels so the tabs are named, or collapseBelow={false} to keep the split at every size.

Tsx

<SplitView
  leftPanel={<Editor />}
  rightPanel={<Preview />}
  labels={{ left: "Editor", right: "Preview" }}
/>

Usage Guidelines

Accessibility: the divider is a focusable role="separator" — arrow keys move it in 5% steps within minSplit/maxSplit, and it reports its position through aria-valuenow
Input: dragging uses pointer events, so it works with a mouse, a pen and touch alike
Responsive: collapses to tabs on small screens rather than shrinking two panes past usefulness
Constraints: Set min/max split ratios to prevent panels from becoming too small
Visual Feedback: Handle changes color when being dragged for better UX