# Splitter

URL: https://ark-ui.com/docs/components/splitter
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/splitter.mdx

A component that divides your interface into resizable sections

---

<ComponentPreview id="Splitter" />

## Anatomy

To set up the splitter correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="splitter" />

## Examples

Learn how to use the `Splitter` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Using Render Props

The Splitter component allows you to pass a function as a child to gain direct access to its API. This provides more
control and allows you to modify the size of the panels programmatically:

<Example id="render-prop" />

### Handling Events

Splitter also provides `onResizeStart`, `onResize`, and `onResizeEnd` events which can be useful to perform some actions
during the start and end of the resizing process:

<Example id="events" />

### Vertical Splitter

By default, the Splitter component is horizontal. If you need a vertical splitter, use the `orientation` prop:

<Example id="vertical" />

### Collapsible Panels

To make a panel collapsible, set the `collapsible` prop to `true` on the panel you want to make collapsible.
Additionally, you can use the `collapsedSize` prop to set the size of the panel when it's collapsed.

> This can be useful for building sidebar layouts.

<Example id="collapsible" />

### Multiple Panels

Here's an example of how to use the `Splitter` component with multiple panels.

<Example id="multiple-panels" />

### Using the Root Provider

The `RootProvider` component provides a context for the splitter. It accepts the value of the `useSplitter` hook. You
can leverage it to access the component state and methods from outside the splitter.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `panels` | `PanelData[]` | Yes | The size constraints of the panels. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultSize` | `number[]` | No | The initial size of the panels when rendered.
Use when you don't need to control the size of the panels. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  resizeTrigger: (id: string) => string
  label: (id: string) => string
  panel: (id: string | number) => string
}>` | No | The ids of the elements in the splitter. Useful for composition. |
| `keyboardResizeBy` | `number` | No | The number of pixels to resize the panel by when the keyboard is used. |
| `nonce` | `string` | No | The nonce for the injected splitter cursor stylesheet. |
| `onCollapse` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is collapsed. |
| `onExpand` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is expanded. |
| `onResize` | `(details: ResizeDetails) => void` | No | Function called when the splitter is resized. |
| `onResizeEnd` | `(details: ResizeEndDetails) => void` | No | Function called when the splitter resize ends. |
| `onResizeStart` | `() => void` | No | Function called when the splitter resize starts. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the splitter. Can be `horizontal` or `vertical` |
| `size` | `number[]` | No | The controlled size data of the panels |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the splitter |


**Panel Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Panel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | panel |
| `[data-orientation]` | The orientation of the panel |
| `[data-id]` |  |
| `[data-index]` | The index of the item |


**ResizeTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | ``${string}:${string}`` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**ResizeTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | resize-trigger |
| `[data-id]` |  |
| `[data-orientation]` | The orientation of the resizetrigger |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSplitterReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `panels` | `PanelData[]` | Yes | The size constraints of the panels. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultSize` | `number[]` | No | The initial size of the panels when rendered.
Use when you don't need to control the size of the panels. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  resizeTrigger: (id: string) => string
  label: (id: string) => string
  panel: (id: string | number) => string
}>` | No | The ids of the elements in the splitter. Useful for composition. |
| `keyboardResizeBy` | `number` | No | The number of pixels to resize the panel by when the keyboard is used. |
| `nonce` | `string` | No | The nonce for the injected splitter cursor stylesheet. |
| `onCollapse` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is collapsed. |
| `onExpand` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is expanded. |
| `onResize` | `(details: ResizeDetails) => void` | No | Function called when the splitter is resized. |
| `onResizeEnd` | `(details: ResizeEndDetails) => void` | No | Function called when the splitter resize ends. |
| `onResizeStart` | `() => void` | No | Function called when the splitter resize starts. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the splitter. Can be `horizontal` or `vertical` |
| `size` | `number[]` | No | The controlled size data of the panels |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the splitter |


**Panel Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Panel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | panel |
| `[data-orientation]` | The orientation of the panel |
| `[data-id]` |  |
| `[data-index]` | The index of the item |


**ResizeTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | ``${string}:${string}`` | Yes |  |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**ResizeTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | resize-trigger |
| `[data-id]` |  |
| `[data-orientation]` | The orientation of the resizetrigger |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSplitterReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `panels` | `PanelData[]` | Yes | The size constraints of the panels. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultSize` | `number[]` | No | The initial size of the panels when rendered.
Use when you don't need to control the size of the panels. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  resizeTrigger(id: string): string
  label(id: string): string
  panel(id: string | number): string
}>` | No | The ids of the elements in the splitter. Useful for composition. |
| `keyboardResizeBy` | `number` | No | The number of pixels to resize the panel by when the keyboard is used. |
| `nonce` | `string` | No | The nonce for the injected splitter cursor stylesheet. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the splitter. Can be `horizontal` or `vertical` |
| `size` | `number[]` | No | The controlled size data of the panels |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the splitter |


**Panel Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Panel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | panel |
| `[data-orientation]` | The orientation of the panel |
| `[data-id]` |  |
| `[data-index]` | The index of the item |


**ResizeTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | ``${string}:${string}`` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**ResizeTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | resize-trigger |
| `[data-id]` |  |
| `[data-orientation]` | The orientation of the resizetrigger |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `SplitterApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `panels` | `PanelData[]` | Yes | The size constraints of the panels. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultSize` | `number[]` | No | The initial size of the panels when rendered.
Use when you don't need to control the size of the panels. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  resizeTrigger: (id: string) => string
  label: (id: string) => string
  panel: (id: string | number) => string
}>` | No | The ids of the elements in the splitter. Useful for composition. |
| `keyboardResizeBy` | `number` | No | The number of pixels to resize the panel by when the keyboard is used. |
| `nonce` | `string` | No | The nonce for the injected splitter cursor stylesheet. |
| `onCollapse` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is collapsed. |
| `onExpand` | `(details: ExpandCollapseDetails) => void` | No | Function called when a panel is expanded. |
| `onResize` | `(details: ResizeDetails) => void` | No | Function called when the splitter is resized. |
| `onResizeEnd` | `(details: ResizeEndDetails) => void` | No | Function called when the splitter resize ends. |
| `onResizeStart` | `() => void` | No | Function called when the splitter resize starts. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the splitter. Can be `horizontal` or `vertical` |
| `ref` | `Element` | No |  |
| `size` | `number[]` | No | The controlled size data of the panels |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the splitter |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseSplitterContext]>` | Yes |  |


**Panel Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Panel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | panel |
| `[data-orientation]` | The orientation of the panel |
| `[data-id]` |  |
| `[data-index]` | The index of the item |


**ResizeTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | ``${string}:${string}`` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `ref` | `Element` | No |  |


**ResizeTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | splitter |
| `[data-part]` | resize-trigger |
| `[data-id]` |  |
| `[data-orientation]` | The orientation of the resizetrigger |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSplitterReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

These are the properties available when using `Splitter.Context`, `useSplitterContext` hook or `useSplitter` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `dragging` | `boolean` | Whether the splitter is currently being resized. |
| `getSizes` | `() => number[]` | Returns the current sizes of the panels. |
| `setSizes` | `(size: number[]) => void` | Sets the sizes of the panels. |
| `getItems` | `() => SplitterItem[]` | Returns the items of the splitter. |
| `getPanelSize` | `(id: string) => number` | Returns the size of the specified panel. |
| `isPanelCollapsed` | `(id: string) => boolean` | Returns whether the specified panel is collapsed. |
| `isPanelExpanded` | `(id: string) => boolean` | Returns whether the specified panel is expanded. |
| `collapsePanel` | `(id: string) => void` | Collapses the specified panel. |
| `expandPanel` | `(id: string, minSize?: number) => void` | Expands the specified panel. |
| `resizePanel` | `(id: string, unsafePanelSize: number) => void` | Resizes the specified panel. |
| `getLayout` | `() => string` | Returns the layout of the splitter. |
| `resetSizes` | `VoidFunction` | Resets the splitter to its initial state. |


## Accessibility

Complies with the [Window Splitter WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).