# SplitPaneProps

Source: /tuil/docs/reference/components/layout/split-pane-props
Locale: en

SplitPaneProps component contract.



{/* Generated by tooling/docs/generate-reference.ts. */}

## Type [#type]

```ts
export interface SplitPaneProps
  extends CommonComponentProps,
    SlottedComponentProps<
      SplitPaneSlots,
      {
        readonly focused: boolean;
        readonly activeDivider: number;
        readonly sizes: readonly number[];
      }
    > {
  readonly panes: readonly SplitPaneItem[];
  readonly orientation?: "horizontal" | "vertical";
  readonly sizes?: readonly number[];
  readonly defaultSizes?: readonly number[];
  readonly onSizesChange?: (sizes: readonly number[]) => void | Promise<void>;
  readonly resizeStep?: number;
  readonly showHelp?: boolean;
  readonly autoFocus?: boolean;
}
```

## Members [#members]

| 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`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                             |
| `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<&#123; root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; &#125;>> \| undefined`                                                                                                         | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; &#125;>> \| undefined` contract.                                                                                                             | [`BoxProps`](/tuil/docs/reference/components/layout/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`     | `Partial<SlotProps<&#123; root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activeDivider: number; readonly sizes: readonly number[]; &#125;>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; track: import("ink").BoxProps; pane: import("ink").BoxProps; divider: import("ink").TextProps; help: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activeDivider: number; readonly sizes: readonly number[]; &#125;>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/components/layout/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

## Source [#source]

[View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/registry/layout/panes.tsx)