---
title: Resizable
description: "`Resizable` is accessible resizable panel groups and layouts with keyboard support."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/resizable/resizable.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/resizable
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-resizable--basic
---

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item display="center">One</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Two</Resizable.Item>
</Resizable.Root>
```

## Usage

```tsx
import { Resizable } from "@yamada-ui/react"
```

```tsx
import { Resizable } from "@/components/ui"
```

```tsx
import { Resizable } from "@workspaces/ui"
```

```tsx
<Resizable.Root>
  <Resizable.Item />
  <Resizable.Trigger />
</Resizable.Root>
```

### Change Variants

```tsx
<VStack>
  <For each={["border", "spacer"]}>
    {(variant) => (
      <Resizable.Root
        key={variant}
        variant={variant}
        h="md"
        borderWidth={variant === "border" ? "1px" : undefined}
      >
        <Resizable.Item
          display="center"
          borderWidth={variant === "spacer" ? "1px" : undefined}
        >
          {toTitleCase(variant)}
        </Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item
          display="center"
          borderWidth={variant === "spacer" ? "1px" : undefined}
        >
          Two
        </Resizable.Item>
      </Resizable.Root>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Resizable.Root
        key={colorScheme}
        variant="spacer"
        colorScheme={colorScheme}
        h="md"
      >
        <Resizable.Item display="center" borderWidth="1px">
          One
        </Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item display="center" borderWidth="1px">
          Two
        </Resizable.Item>
      </Resizable.Root>
    )}
  </For>
</VStack>
```

### Change Orientation

To change the orientation, set `orientation` to either `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set.

```tsx
<VStack>
  <For each={["horizontal", "vertical"]}>
    {(orientation) => (
      <Resizable.Root
        key={orientation}
        orientation={orientation}
        h="md"
        borderWidth="1px"
      >
        <Resizable.Item display="center">One</Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item display="center">Two</Resizable.Item>
      </Resizable.Root>
    )}
  </For>
</VStack>
```

### Use Default Size

To set the default size, set a string or number for `defaultSize` in `Resizable.Item`.

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item display="center" defaultSize="30%">
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Two</Resizable.Item>
</Resizable.Root>
```

### Use Min and Max Size

To set the minimum and maximum sizes, set a string or number for `minSize` and `maxSize` in `Resizable.Item`.

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item display="center" minSize="30%" maxSize="70%">
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Two</Resizable.Item>
</Resizable.Root>
```

### Collapsible

To make an item collapsible, set `collapsible` to `true`.

Specify the string or number before collapsing with `minSize`, and the string or number when collapsed with `collapsedSize`.

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item
      display="center"
      collapsedSize="15%"
      collapsible
      defaultSize="30%"
      minSize="30%"
      maxSize="50%"
    >
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item display="center">Two</Resizable.Item>
  </Resizable.Root>

  <Resizable.Root orientation="vertical" h="md" borderWidth="1px">
    <Resizable.Item
      display="center"
      collapsedSize="15%"
      collapsible
      defaultSize="30%"
      minSize="30%"
      maxSize="50%"
    >
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item display="center">Two</Resizable.Item>
  </Resizable.Root>
</VStack>
```

### Add Icons

To add icons, set a `ReactNode` to the `icon` of `Resizable.Trigger`.

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item display="center">One</Resizable.Item>

    <Resizable.Trigger icon={<GripVerticalIcon />} />

    <Resizable.Item display="center">Two</Resizable.Item>
  </Resizable.Root>

  <Resizable.Root variant="spacer" h="md" orientation="vertical">
    <Resizable.Item display="center" borderWidth="1px">
      One
    </Resizable.Item>

    <Resizable.Trigger icon={<GripVerticalIcon />} />

    <Resizable.Item display="center" borderWidth="1px">
      Two
    </Resizable.Item>
  </Resizable.Root>
</VStack>
```

### Nested Structure

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item display="center">Left</Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item>
      <Resizable.Root orientation="vertical">
        <Resizable.Item display="center">Top</Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item display="center">Bottom</Resizable.Item>
      </Resizable.Root>
    </Resizable.Item>
  </Resizable.Root>

  <Resizable.Root orientation="vertical" h="md" borderWidth="1px">
    <Resizable.Item display="center">Top</Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item>
      <Resizable.Root>
        <Resizable.Item display="center">Left</Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item display="center">Right</Resizable.Item>
      </Resizable.Root>
    </Resizable.Item>
  </Resizable.Root>
</VStack>
```

### Disable

To disable, set `disabled` to `true`.

```tsx
<Resizable.Root disabled h="md" borderWidth="1px">
  <Resizable.Item display="center">One</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Two</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Three</Resizable.Item>
</Resizable.Root>
```

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item display="center">One</Resizable.Item>

  <Resizable.Trigger disabled />

  <Resizable.Item display="center">Two</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Three</Resizable.Item>
</Resizable.Root>
```

### Handle Resize Events

```tsx
<Resizable.Root
  h="md"
  borderWidth="1px"
  onLayoutChange={(layout) => {
    console.log("layout change", layout)
  }}
  onLayoutChanged={(layout) => {
    console.log("layout changed", layout)
  }}
>
  <Resizable.Item
    display="center"
    onResize={(panelSize, id, prevPanelSize) => {
      console.log("item resize", panelSize, id, prevPanelSize)
    }}
  >
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item display="center">Two</Resizable.Item>
</Resizable.Root>
```

### Save Values to LocalStorage or Cookie

To save values to localStorage or Cookie, use `Resizable.useLayout`.

:::note
You must set an `id` to `Resizable.Item` to associate each saved value with the `Resizable.Item`.
:::

```tsx preview functional client
const storage: Resizable.Storage = useMemo(
  () => ({
    getItem: (key) => {
      if (!createdDom()) return null

      const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`))

      return match ? (match[2] ?? null) : null
    },
    setItem: (key, value) => {
      if (!createdDom()) return

      document.cookie = `${key}=${value}; max-age=31536000; path=/`
    },
  }),
  [],
)
const { defaultLayout, onLayoutChanged } = Resizable.useLayout({
  id: "persistence",
  storage,
})

return (
  <Resizable.Root
    borderWidth="1px"
    defaultLayout={defaultLayout}
    h="md"
    rounded="l2"
    onLayoutChanged={onLayoutChanged}
  >
    <Resizable.Item id="one" display="center">
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item id="two" display="center">
      Two
    </Resizable.Item>
  </Resizable.Root>
)
```

To use local storage, set `localStorage` to `storage`.

```tsx
const { defaultLayout, onLayoutChanged } = Resizable.useLayout({
  id: "persistence",
  storage: localStorage,
})
```

### Control

```tsx
const controlRef = useRef<Resizable.ItemControl>(null)

return (
  <>
    <Wrap gap="md">
      <Button onClick={() => controlRef.current?.collapse()}>
        Collapse "one"
      </Button>

      <Button onClick={() => controlRef.current?.expand()}>Expand "one"</Button>
      <Button onClick={() => controlRef.current?.resize("30%")}>
        Resize "one" to 30
      </Button>

      <Button onClick={() => controlRef.current?.resize("50%")}>
        Resize "one" to 50
      </Button>
    </Wrap>

    <Resizable.Root borderWidth="1px" h="md" rounded="l2">
      <Resizable.Item
        collapsedSize="15%"
        collapsible
        controlRef={controlRef}
        display="center"
        maxSize="50%"
        minSize="30%"
      >
        One
      </Resizable.Item>

      <Resizable.Trigger />

      <Resizable.Item display="center">Two</Resizable.Item>
    </Resizable.Root>
  </>
)
```

## Uses Components & Hooks

<Uses name="resizable" />

## Props

### Resizable.Root

| Prop          | Default    | Type                                                                                                                      | Description                                |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -          | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -          | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -          | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -          | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `variant`     | `"border"` | `"border" \| "plain" \| "spacer"`                                                                                         | The variant of the component.              |
| `controlRef`  | -          | `RefObject<ResizableRootControl \| null>`                                                                                 | Ref of the resizable item callback.        |

### Resizable.Item

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `controlRef`  | -       | `RefObject<null \| ResizableItemControl>`                                                                                 | Ref of the resizable item callback.        |

### Resizable.Trigger

| Prop          | Default | Type                                                                                                                      | Description                                 |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.  |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                             |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                 |
| `icon`        | -       | `ReactElement`                                                                                                            | The resizable trigger icon to use.          |
| `iconProps`   | -       | `HTMLStyledProps`                                                                                                         | Props for resizable trigger icon component. |

## Accessibility

The `Resizable` follows the [WAI-ARIA - Window Splitter Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/) for accessibility.

### Keyboard Navigation

| Key          | Description                                                            | State                      |
| ------------ | ---------------------------------------------------------------------- | -------------------------- |
| `ArrowRight` | Increases the value based on the `keyboardStep` value.                 | `orientation="horizontal"` |
| `ArrowLeft`  | Decreases the value based on the `keyboardStep` value.                 | `orientation="horizontal"` |
| `ArrowUp`    | Increases the value based on the `keyboardStep` value.                 | `orientation="vertical"`   |
| `ArrowDown`  | Decreases the value based on the `keyboardStep` value.                 | `orientation="vertical"`   |
| `Enter`      | If expanded, collapses the pane; if collapsed, restores it to minSize. | `collapsible="true"`       |
| `Home`       | Sets the value to `minSize`.                                           | -                          |
| `End`        | Sets the value to `maxSize`.                                           | -                          |

### ARIA Roles and Attributes

| Component           | Roles and Attributes | Usage                                                                                            |
| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------ |
| `Resizable.Item`    | `id`                 | Used to associate with `Resizable.Trigger`.                                                      |
| `Resizable.Trigger` | `role="separator"`   | Indicates that this is a separator.                                                              |
|                     | `aria-controls`      | Sets the `id` of the associated `Resizable.Item`.                                                |
|                     | `aria-orientation`   | Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`. |
|                     | `aria-valuemin`      | Sets the `minSize` value. Default is `0`.                                                        |
|                     | `aria-valuemax`      | Sets the `maxSize` value. Default is `100`.                                                      |
|                     | `aria-valuenow`      | Sets the current value.                                                                          |