---
title: Editable
description: "`Editable`は、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/editable/editable.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/editable
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-editable--basic
---

```tsx
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

## 使い方

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

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

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

```tsx
<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
  <Editable.Textarea />
  <Editable.Control>
    <Editable.EditTrigger />
    <Editable.SubmitTrigger />
    <Editable.CancelTrigger />
  </Editable.Control>
</Editable.Root>
```

### テキストエリアを使う

```tsx preview
<Editable.Root defaultValue={`おやつ…って事!?\nそれって最高じゃん!!`}>
  <Editable.Preview />
  <Editable.Textarea />
</Editable.Root>
```

### 編集モードをデフォルトにする

編集モードをデフォルトにする場合は、`startWithEditView`を`true`に設定します。

```tsx
<Editable.Root defaultValue="なんとかなれーッ！" startWithEditView>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### フォーカスが外れた場合に変更を確定しない

フォーカスが外れた場合に変更を確定しない場合は、`submitOnBlur`を`false`に設定します。

```tsx
<Editable.Root defaultValue="なんとかなれーッ！" submitOnBlur={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### フォーカス時に選択しない

フォーカス時にテキストを選択しない場合は、`selectAllOnFocus`を`false`に設定します。

```tsx
<Editable.Root defaultValue="なんとかなれーッ！" selectAllOnFocus={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx
<VStack>
  <Editable.Root
    defaultValue="Custom focus border color"
    focusBorderColor="green.500"
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Editable.Root
    defaultValue="Custom error border color"
    errorBorderColor="orange.500"
    invalid
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
</VStack>
```

### 無効にする

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

```tsx
<VStack>
  <Editable.Root defaultValue="Your email address" disabled>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    disabled
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx
<VStack>
  <Editable.Root defaultValue="Your email address" readOnly>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    readOnly
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 無効な入力にする

無効な入力にする場合は、`invalid`を`true`に設定します。

```tsx
<VStack>
  <Editable.Root defaultValue="Your email address" invalid>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    invalid
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 制御する

```tsx
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />

  <Editable.Control>
    <Editable.EditTrigger>
      <IconButton
        size="xs"
        variant="ghost"
        aria-label="Edit"
        icon={<PencilIcon />}
      />
    </Editable.EditTrigger>
    <Editable.SubmitTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Submit"
        icon={<CheckIcon />}
      />
    </Editable.SubmitTrigger>
    <Editable.CancelTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Cancel"
        icon={<XIcon />}
      />
    </Editable.CancelTrigger>
  </Editable.Control>
</Editable.Root>
```

### 制御をカスタマイズする

```tsx
const CustomControls = () => {
  const { getCancelProps, getEditProps, getSubmitProps } = Editable.useContext()
  return (
    <ButtonGroup.Root size="xs">
      <ButtonGroup.IconItem
        icon={<PencilIcon />}
        {...getEditProps()}
        variant="ghost"
        aria-label="Edit"
      />

      <ButtonGroup.IconItem
        icon={<CheckIcon />}
        {...getSubmitProps()}
        variant="outline"
        aria-label="Submit"
      />

      <ButtonGroup.IconItem
        icon={<XIcon />}
        {...getCancelProps()}
        variant="outline"
        aria-label="Cancel"
      />
    </ButtonGroup.Root>
  )
}

return (
  <Editable.Root defaultValue="なんとかなれーッ！" previewFocusable={false}>
    <Editable.Preview />
    <Editable.Input />
    <CustomControls />
  </Editable.Root>
)
```

## Props

### Editable.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.                                                                                    |
| `children`          | -       | `ReactNodeOrFunction<EditableElementProps>`                                                                                                                       | The editable children to use.                                                                                  |
| `defaultValue`      | -       | `string`                                                                                                                                                          | The initial value of the Editable in both edit & preview mode.                                                 |
| `disabled`          | `false` | `boolean`                                                                                                                                                         | If `true`, the field will be disabled.                                                                         |
| `errorBorderColor`  | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid.                                                                    |
| `focusBorderColor`  | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is focused.                                                                    |
| `invalid`           | `false` | `boolean`                                                                                                                                                         | If `true`, the field will be invalid.                                                                          |
| `onCancel`          | -       | `(preValue: string) => void`                                                                                                                                      | Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument. |
| `onChange`          | -       | `(value: string) => void`                                                                                                                                         | A callback invoked when user changes input.                                                                    |
| `onEdit`            | -       | `() => void`                                                                                                                                                      | A callback invoked once the user enters edit mode.                                                             |
| `onSubmit`          | -       | `(value: string) => void`                                                                                                                                         | A callback invoked when user confirms value with `enter` key or by blurring input.                             |
| `placeholder`       | -       | `string`                                                                                                                                                          | The placeholder text when the value is empty.                                                                  |
| `previewFocusable`  | `true`  | `boolean`                                                                                                                                                         | If `true`, the read only view, has a `tabIndex` set to `0` so it can receive focus via the keyboard or click.  |
| `readOnly`          | `false` | `boolean`                                                                                                                                                         | If `true`, the field will be readonly.                                                                         |
| `required`          | `false` | `boolean`                                                                                                                                                         | If `true`, the field will be required.                                                                         |
| `selectAllOnFocus`  | `true`  | `boolean`                                                                                                                                                         | If `true`, the input's text will be highlighted on focus.                                                      |
| `startWithEditView` | -       | `boolean`                                                                                                                                                         | If `true`, the Editable will start with edit mode by default.                                                  |
| `submitOnBlur`      | `true`  | `boolean`                                                                                                                                                         | If `true`, it'll update the value onBlur and turn off the edit mode.                                           |
| `value`             | -       | `string`                                                                                                                                                          | The value of the Editable in both edit & preview mode.                                                         |

### Editable.CancelTrigger

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

### Editable.Control

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

### Editable.EditTrigger

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

### Editable.Input

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

### Editable.Preview

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

### Editable.SubmitTrigger

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

### Editable.Textarea

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

## アクセシビリティ

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