# Split

Two resizable panes side by side or stacked; nested components pick a pane through layout.slot (first, second).

## Add it to an app

1. Open the app builder and find **Split** in the component palette.
2. Insert it into the intended region or container.
3. Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
4. Connect its events where the app should respond to a user gesture.
5. Preview with representative data and save after resolving validation problems.

The type name in the builder’s code view is `split`.

## Settings

| Setting | Accepted value | Required | Default | What it controls |
| --- | --- | --- | --- | --- |
| Height (CSS length; blank = auto, 24rem when vertical) (`height`) | string | No | "" | Literal only; do not use an expression binding. One length with a unit (px, rem, em, vh, %). Stacked panes need a definite height for their shares. |
| Minimum share of the first pane (0-0.5) (`minFirst`) | number; minimum 0; maximum 0.5 | No | 0.2 | Literal only; do not use an expression binding. |
| Minimum share of the second pane (0-0.5) (`minSecond`) | number; minimum 0; maximum 0.5 | No | 0.2 | Literal only; do not use an expression binding. |
| Orientation (horizontal = side by side \| vertical = stacked) (`orientation`) | "horizontal" / "vertical" | No | "horizontal" | Literal only; do not use an expression binding. |
| First pane's opening share (strictly between 0 and 1) (`ratio`) | number; minimum 0; maximum 1 | No | 0.5 | Literal only; do not use an expression binding. Clamped into the band the two minimum shares define; the reset gesture returns here. The ends are not shares: 0 or 1 (an empty pane), like any unusable value, opens at the even split. |

## Values available to bindings

This component declares no published values. Use its settings and any events to configure its behaviour.

## Keyboard and accessible labels

Accessible label source: The splitter announces "Resize panes" with the first pane's share as its value.

- Arrow keys along the split axis move the splitter 2% (10% with Shift)

- Home / End snap to the minimum shares

- Enter resets to the authored ratio; Shift+Enter is the even split

- Drag with a pointer; double-click resets

## Example: A 40/60 side-by-side split

| Setting | Example value |
| --- | --- |
| `minFirst` | 0.25 |
| `minSecond` | 0.25 |
| `orientation` | "horizontal" |
| `ratio` | 0.4 |

## If it is empty or unavailable

Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.