---
title: Resizable
description: "`Resizable`は、キーボードのサポートを備えたサイズ変更可能なレイアウトコンポーネントです。"
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 as={Center}>One</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
```

## 使い方

```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>
```

### バリアントを変更する

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

        <Resizable.Trigger />

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

### カラースキームを変更する

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

        <Resizable.Trigger />

        <Resizable.Item as={Center} borderWidth="1px">
          Two
        </Resizable.Item>
      </Resizable.Root>
    )}
  </For>
</VStack>
```

### 方向を変更する

方向を変更する場合は、`orientation`に`"horizontal"`または`"vertical"`を設定します。デフォルトでは、`"horizontal"`が設定されています。

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

        <Resizable.Trigger />

        <Resizable.Item as={Center}>Two</Resizable.Item>
      </Resizable.Root>
    )}
  </For>
</VStack>
```

### デフォルトサイズを使う

デフォルトサイズを使う場合は、`Resizable.Item`の`defaultSize`に数値(割合)を設定します。

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item as={Center} defaultSize={30}>
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
```

### 最小・最大サイズを使う

最小・最大サイズを使う場合は、`Resizable.Item`の`minSize`と`maxSize`に数値(割合)を設定します。

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item as={Center} minSize={30} maxSize={70}>
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
```

### キーボードステップを使う

キーボードステップを使う場合は、`keyboardStep`に数値(割合)を設定します。

```tsx
<Resizable.Root h="md" borderWidth="1px" keyboardStep={25}>
  <Resizable.Item as={Center}>One</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
```

### 折りたたみを可能にする

折りたたみを可能にする場合は、`collapsible`を`true`に設定します。

`minSize`は折りたたむ前の数値を設定し、`collapsedSize`は折りたたんだ状態の数値を設定します。

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item
      as={Center}
      collapsedSize={15}
      collapsible
      defaultSize={30}
      minSize={30}
      maxSize={50}
      onCollapse={() => {
        console.log("collapsed item")
      }}
      onExpand={() => {
        console.log("expand item")
      }}
    >
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item as={Center}>Two</Resizable.Item>
  </Resizable.Root>

  <Resizable.Root orientation="vertical" h="md" borderWidth="1px">
    <Resizable.Item
      as={Center}
      collapsedSize={10}
      collapsible
      defaultSize={25}
      minSize={25}
      maxSize={30}
      onCollapse={() => {
        console.log("collapsed item")
      }}
      onExpand={() => {
        console.log("expand item")
      }}
    >
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item as={Center}>Two</Resizable.Item>
  </Resizable.Root>
</VStack>
```

### アイコンを追加する

アイコンを追加する場合は、`Resizable.Trigger`の`icon`に`ReactNode`を設定します。

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item as={Center}>One</Resizable.Item>

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

    <Resizable.Item as={Center}>Two</Resizable.Item>
  </Resizable.Root>

  <Resizable.Root variant="spacer" h="md" orientation="vertical">
    <Resizable.Item as={Center} borderWidth="1px">
      One
    </Resizable.Item>

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

    <Resizable.Item as={Center} borderWidth="1px">
      Two
    </Resizable.Item>
  </Resizable.Root>
</VStack>
```

### ネストした構造

```tsx
<VStack>
  <Resizable.Root h="md" borderWidth="1px">
    <Resizable.Item as={Center}>Left</Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item>
      <Resizable.Root orientation="vertical">
        <Resizable.Item as={Center}>Top</Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item as={Center}>Bottom</Resizable.Item>
      </Resizable.Root>
    </Resizable.Item>
  </Resizable.Root>

  <Resizable.Root orientation="vertical" h="md" borderWidth="1px">
    <Resizable.Item as={Center}>Top</Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item>
      <Resizable.Root>
        <Resizable.Item as={Center}>Left</Resizable.Item>

        <Resizable.Trigger />

        <Resizable.Item as={Center}>Right</Resizable.Item>
      </Resizable.Root>
    </Resizable.Item>
  </Resizable.Root>
</VStack>
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx
<Resizable.Root disabled h="md" borderWidth="1px">
  <Resizable.Item as={Center}>One</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Three</Resizable.Item>
</Resizable.Root>
```

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item as={Center}>One</Resizable.Item>

  <Resizable.Trigger disabled />

  <Resizable.Item as={Center}>Two</Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Three</Resizable.Item>
</Resizable.Root>
```

### リサイズイベントをハンドルする

リサイズイベントをハンドルする場合は、`onResize`を使用します。`onResize`は、変更したサイズと前回のサイズを提供します。

```tsx
<Resizable.Root h="md" borderWidth="1px">
  <Resizable.Item
    as={Center}
    onResize={(size, prevSize) => {
      console.log("resized", size, prevSize)
    }}
  >
    One
  </Resizable.Item>

  <Resizable.Trigger />

  <Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
```

### ローカルストレージに値を保存する

ローカルストレージに値を保存する場合は、`storageKey`にローカルストレージに保存するキーを設定します。

:::warning
ローカルストレージなどに値を保存する場合は、保存された各値と`Resizable.Item`を関連付けするために`Resizable.Item`に`id`を設定する必要があります。
:::

:::warning
もし、`Resizable.Item`を動的にマウントさせる場合は、`order`に数値を設定してアイテムの並び順を固定化する必要があります。
:::

```tsx
const [showLeft, showLeftControls] = useBoolean(true)
const [showRight, showRightControls] = useBoolean(true)

return (
  <VStack>
    <Resizable.Root h="md" borderWidth="1px" storageKey="persistence">
      <Resizable.Item as={Center} id="one">
        One
      </Resizable.Item>

      <Resizable.Trigger />

      <Resizable.Item as={Center} id="two">
        Two
      </Resizable.Item>
    </Resizable.Root>

    <Wrap gap="md">
      <Button onClick={showLeftControls.toggle}>
        {showLeft ? "Hidden" : "Show"} Left
      </Button>
      <Button onClick={showRightControls.toggle}>
        {showRight ? "Hidden" : "Show"} Right
      </Button>
    </Wrap>

    <Resizable.Root h="md" borderWidth="1px" storageKey="conditional">
      {showLeft ? (
        <>
          <Resizable.Item as={Center} id="left" minSize={10} order={1}>
            Left
          </Resizable.Item>

          <Resizable.Trigger />
        </>
      ) : null}

      <Resizable.Item as={Center} id="middle" minSize={10} order={2}>
        Middle
      </Resizable.Item>

      {showRight ? (
        <>
          <Resizable.Trigger />

          <Resizable.Item as={Center} id="right" minSize={10} order={3}>
            Right
          </Resizable.Item>
        </>
      ) : null}
    </Resizable.Root>
  </VStack>
)
```

### Cookieに値を保存する

`cookies`に値を保存する場合は、`storage`に`getItem`と`setItem`を設定します。

:::note
Next.jsなどのサーバー側でレンダリングされるサイトに有効なアプローチです。
:::

```tsx preview functional client
const storage = useMemo<Resizable.Storage>(
  () => ({
    getItem: (key) => {
      const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`))

      return match ? match[2] : null
    },
    setItem: (key, value) => {
      document.cookie = `${key}=${value}; max-age=31536000; path=/`
    },
  }),
  [],
)

return (
  <Resizable.Root
    h="md"
    borderWidth="1px"
    storageKey="persistence"
    storage={storage}
  >
    <Resizable.Item as={Center} id="one">
      One
    </Resizable.Item>

    <Resizable.Trigger />

    <Resizable.Item as={Center} id="two">
      Two
    </Resizable.Item>
  </Resizable.Root>
)
```

### 制御する

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

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

      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.expand()
        }}
      >
        Expand "One"
      </Button>
      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.resize(30)
        }}
      >
        Resize "One" To 30
      </Button>

      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.resize(50)
        }}
      >
        Resize "One" To 50
      </Button>
    </Wrap>

    <Resizable.Root h="md" borderWidth="1px">
      <Resizable.Item
        as={Center}
        controlRef={controlRef}
        collapsible
        collapsedSize={15}
        minSize={30}
        maxSize={50}
      >
        One
      </Resizable.Item>

      <Resizable.Trigger />

      <Resizable.Item as={Center}>Two</Resizable.Item>
    </Resizable.Root>
  </VStack>
)
```

## 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<ResizableGroupControl \| null>`                                                                                | Ref of the resizable item callback.                                        |
| `disabled`     | -              | `boolean`                                                                                                                 | If `true`, the resizable trigger will be disabled.                         |
| `groupProps`   | -              | `ResizableGroupProps`                                                                                                     | Props for resizable component.                                             |
| `keyboardStep` | `10`           | `number`                                                                                                                  | Unit to resize by keyboard operation.                                      |
| `onLayout`     | -              | `PanelGroupOnLayout`                                                                                                      | The callback invoked when resizable items are resized.                     |
| `orientation`  | `"horizontal"` | `"horizontal" \| "vertical"`                                                                                              | The orientation of the resizable.                                          |
| `rootRef`      | -              | `ForwardedRef<HTMLDivElement>`                                                                                            | Ref for resizable root element.                                            |
| `storage`      | -              | `PanelGroupStorage`                                                                                                       | A callback that gets and sets a value in custom storage.                   |
| `storageKey`   | -              | `string`                                                                                                                  | Key of value saved in storage. By default, it is saved to `local storage`. |

### Resizable.Item

| Prop            | Default | Type                                                                                                                      | Description                                             |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `as`            | -       | `keyof HTMLElementTagNameMap`                                                                                             | 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.                             |
| `collapsedSize` | -       | `number`                                                                                                                  | The collapsed size of the resizable item.               |
| `collapsible`   | `false` | `boolean`                                                                                                                 | If `true`, the resizable item can be collapsed.         |
| `controlRef`    | -       | `RefObject<null \| ResizableItemControl>`                                                                                 | Ref of the resizable item callback.                     |
| `defaultSize`   | -       | `number`                                                                                                                  | The initial size of the resizable item.                 |
| `maxSize`       | -       | `number`                                                                                                                  | The maximum allowed value of the resizable item.        |
| `minSize`       | -       | `number`                                                                                                                  | The minimum allowed value of the resizable item.        |
| `onCollapse`    | -       | `() => void`                                                                                                              | The callback invoked when resizable item are collapsed. |
| `onExpand`      | -       | `() => void`                                                                                                              | The callback invoked when resizable item are expanded.  |
| `onResize`      | -       | `(size: number, prevSize: number \| undefined) => void`                                                                   | The callback invoked when resizable item are resized.   |
| `order`         | -       | `number`                                                                                                                  | Order for the resizable item.                           |

### Resizable.Trigger

| Prop          | Default | Type                                                                                                                      | Description                                              |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `as`          | -       | `keyof HTMLElementTagNameMap`                                                                                             | 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.                              |
| `disabled`    | `false` | `boolean`                                                                                                                 | If `true`, the resizable trigger will be disabled.       |
| `icon`        | -       | `ReactElement`                                                                                                            | The resizable trigger icon to use.                       |
| `iconProps`   | -       | `HTMLStyledProps`                                                                                                         | Props for resizable trigger icon component.              |
| `onDragging`  | -       | `(dragging: boolean) => void`                                                                                             | The callback invoked when resizable trigger are dragged. |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。