---
title: Editable
description: "`Editable` is a component used to obtain inline editable text input."
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>
```

## Usage

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

### Use Textarea

To enable multiple lines, use `Editable.Textarea`.

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

### Make Edit Mode Default

To make edit mode default, set `startWithEditView` to `true`.

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

### Disable Submit on Blur

To prevent submitting changes when focus is lost, set `submitOnBlur` to `false`.

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

### Disable Text Selection on Focus

To prevent text selection when focused, set `selectAllOnFocus` to `false`.

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

### Change Border Color

To change the border color, set a color to `focusBorderColor` or `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>
```

### Disable

To disable, set `disabled` to `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>
```

### Read-Only

To read-only, set `readOnly` to `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

To make the input invalid, set `invalid` to `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>
```

### Control

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

### Control

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

## Accessibility

Currently, this section is being updated due to the migration of v2.