# Editable

URL: https://ark-ui.com/docs/components/editable
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/editable.mdx

A component that allows users to edit text in place.

---

<ComponentPreview id="Editable" />

## Anatomy

<Anatomy id="editable" />

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

## Examples

**Example: basic**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import { PencilIcon } from 'lucide-react'
import styles from 'styles/editable.module.css'

export const Basic = () => (
  <Editable.Root className={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label className={styles.Label}>Label</Editable.Label>
    <Editable.Area className={styles.Area}>
      <Editable.Input className={styles.Input} />
      <Editable.Preview className={styles.Preview} />
    </Editable.Area>
    <Editable.Control className={styles.Control}>
      <Editable.EditTrigger className={styles.EditTrigger}>
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
)

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import styles from 'styles/editable.module.css'

export const Basic = () => (
  <Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Control class={styles.Control}>
      <Editable.EditTrigger class={styles.EditTrigger}>
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import { PencilIcon } from 'lucide-vue-next'
import styles from 'styles/editable.module.css'
</script>

<template>
  <Editable.Root :class="styles.Root" placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label :class="styles.Label">Label</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Input" />
      <Editable.Preview :class="styles.Preview" />
    </Editable.Area>
    <Editable.Control :class="styles.Control">
      <Editable.EditTrigger :class="styles.EditTrigger">
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import PencilIcon from 'lucide-svelte/icons/pencil'
  import styles from 'styles/editable.module.css'
</script>

<Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
  <Editable.Label class={styles.Label}>Label</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Input} />
    <Editable.Preview class={styles.Preview} />
  </Editable.Area>
  <Editable.Control class={styles.Control}>
    <Editable.EditTrigger class={styles.EditTrigger}>
      <PencilIcon />
    </Editable.EditTrigger>
  </Editable.Control>
</Editable.Root>

```

### Controlled

Use the `value` and `onValueChange` props to control the editable state.

**Example: controlled**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import { PencilIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/editable.module.css'

export const Controlled = () => {
  const [value, setValue] = useState('Hello World')

  return (
    <Editable.Root
      className={styles.Root}
      placeholder="Enter text..."
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Editable.Label className={styles.Label}>Label</Editable.Label>
      <Editable.Area className={styles.Area}>
        <Editable.Input className={styles.Input} />
        <Editable.Preview className={styles.Preview} />
      </Editable.Area>
      <Editable.Control className={styles.Control}>
        <Editable.EditTrigger className={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.Root>
  )
}

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal('Hello World')

  return (
    <Editable.Root
      class={styles.Root}
      placeholder="Enter text..."
      value={value()}
      onValueChange={(e) => setValue(e.value)}
    >
      <Editable.Label class={styles.Label}>Label</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
      <Editable.Control class={styles.Control}>
        <Editable.EditTrigger class={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import { PencilIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/editable.module.css'

const value = ref('Hello World')
</script>

<template>
  <Editable.Root :class="styles.Root" placeholder="Enter text..." v-model="value">
    <Editable.Label :class="styles.Label">Label</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Input" />
      <Editable.Preview :class="styles.Preview" />
    </Editable.Area>
    <Editable.Control :class="styles.Control">
      <Editable.EditTrigger :class="styles.EditTrigger">
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import PencilIcon from 'lucide-svelte/icons/pencil'
  import styles from 'styles/editable.module.css'

  let value = $state('Hello World')
</script>

<Editable.Root class={styles.Root} placeholder="Enter text..." {value} onValueChange={(e) => (value = e.value)}>
  <Editable.Label class={styles.Label}>Label</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Input} />
    <Editable.Preview class={styles.Preview} />
  </Editable.Area>
  <Editable.Control class={styles.Control}>
    <Editable.EditTrigger class={styles.EditTrigger}>
      <PencilIcon />
    </Editable.EditTrigger>
  </Editable.Control>
</Editable.Root>

```

### Root Provider

An alternative way to control the editable is to use the `RootProvider` component and the `useEditable` hook. This way
you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Editable, useEditable } from '@ark-ui/react/editable'
import { PencilIcon } from 'lucide-react'
import styles from 'styles/editable.module.css'

export const RootProvider = () => {
  const editable = useEditable({ defaultValue: 'Hello World' })

  return (
    <Editable.RootProvider className={styles.Root} value={editable}>
      <Editable.Label className={styles.Label}>Label</Editable.Label>
      <Editable.Area className={styles.Area}>
        <Editable.Input className={styles.Input} />
        <Editable.Preview className={styles.Preview} />
      </Editable.Area>
      <Editable.Control className={styles.Control}>
        <Editable.EditTrigger className={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.RootProvider>
  )
}

```

#### Solid

```tsx
import { Editable, useEditable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import styles from 'styles/editable.module.css'

export const RootProvider = () => {
  const editable = useEditable({ defaultValue: 'Hello World' })

  return (
    <Editable.RootProvider class={styles.Root} value={editable}>
      <Editable.Label class={styles.Label}>Label</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
      <Editable.Control class={styles.Control}>
        <Editable.EditTrigger class={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.RootProvider>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Editable, useEditable } from '@ark-ui/vue/editable'
import { PencilIcon } from 'lucide-vue-next'
import styles from 'styles/editable.module.css'

const editable = useEditable({ defaultValue: 'Hello World' })
</script>

<template>
  <Editable.RootProvider :class="styles.Root" :value="editable">
    <Editable.Label :class="styles.Label">Label</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Input" />
      <Editable.Preview :class="styles.Preview" />
    </Editable.Area>
    <Editable.Control :class="styles.Control">
      <Editable.EditTrigger :class="styles.EditTrigger">
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable, useEditable } from '@ark-ui/svelte/editable'
  import PencilIcon from 'lucide-svelte/icons/pencil'
  import styles from 'styles/editable.module.css'

  const editable = useEditable({ defaultValue: 'Hello World' })
</script>

<Editable.RootProvider class={styles.Root} value={editable}>
  <Editable.Label class={styles.Label}>Label</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Input} />
    <Editable.Preview class={styles.Preview} />
  </Editable.Area>
  <Editable.Control class={styles.Control}>
    <Editable.EditTrigger class={styles.EditTrigger}>
      <PencilIcon />
    </Editable.EditTrigger>
  </Editable.Control>
</Editable.RootProvider>

```

### Context

Use `Editable.Context` to access the editable state and show contextual UI like keyboard hints when editing.

**Example: context**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import { PencilIcon } from 'lucide-react'
import styles from 'styles/editable.module.css'

export const Context = () => (
  <Editable.Root className={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label className={styles.Label}>Label</Editable.Label>
    <Editable.Area className={styles.Area}>
      <Editable.Input className={styles.Input} />
      <Editable.Preview className={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) =>
        editable.editing ? (
          <span className={styles.HelperText}>Enter to save, Esc to cancel</span>
        ) : (
          <Editable.Control className={styles.Control}>
            <Editable.EditTrigger className={styles.EditTrigger}>
              <PencilIcon />
            </Editable.EditTrigger>
          </Editable.Control>
        )
      }
    </Editable.Context>
  </Editable.Root>
)

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import { Show } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Context = () => (
  <Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) => (
        <Show
          when={editable().editing}
          fallback={
            <Editable.Control class={styles.Control}>
              <Editable.EditTrigger class={styles.EditTrigger}>
                <PencilIcon />
              </Editable.EditTrigger>
            </Editable.Control>
          }
        >
          <span class={styles.HelperText}>Enter to save, Esc to cancel</span>
        </Show>
      )}
    </Editable.Context>
  </Editable.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import { PencilIcon } from 'lucide-vue-next'
import styles from 'styles/editable.module.css'
</script>

<template>
  <Editable.Root :class="styles.Root" placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label :class="styles.Label">Label</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Input" />
      <Editable.Preview :class="styles.Preview" />
    </Editable.Area>
    <Editable.Context v-slot="{ editing }">
      <span v-if="editing" :class="styles.HelperText">Enter to save, Esc to cancel</span>
      <Editable.Control v-else :class="styles.Control">
        <Editable.EditTrigger :class="styles.EditTrigger">
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.Context>
  </Editable.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import PencilIcon from 'lucide-svelte/icons/pencil'
  import styles from 'styles/editable.module.css'
</script>

<Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
  <Editable.Label class={styles.Label}>Label</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Input} />
    <Editable.Preview class={styles.Preview} />
  </Editable.Area>
  <Editable.Context>
    {#snippet render(editable)}
      {#if editable().editing}
        <span class={styles.HelperText}>Enter to save, Esc to cancel</span>
      {:else}
        <Editable.Control class={styles.Control}>
          <Editable.EditTrigger class={styles.EditTrigger}>
            <PencilIcon />
          </Editable.EditTrigger>
        </Editable.Control>
      {/if}
    {/snippet}
  </Editable.Context>
</Editable.Root>

```

### Controls

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to
provide access to the internal state of the component.

**Example: controls**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import { CheckIcon, PencilIcon, XIcon } from 'lucide-react'
import styles from 'styles/editable.module.css'

export const Controls = () => (
  <Editable.Root className={styles.Root} defaultValue="Click edit to start">
    <Editable.Label className={styles.Label}>Label</Editable.Label>
    <Editable.Area className={styles.Area}>
      <Editable.Input className={styles.Input} />
      <Editable.Preview className={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) => (
        <Editable.Control className={styles.Control}>
          {editable.editing ? (
            <>
              <Editable.SubmitTrigger className={styles.SubmitTrigger}>
                <CheckIcon />
              </Editable.SubmitTrigger>
              <Editable.CancelTrigger className={styles.CancelTrigger}>
                <XIcon />
              </Editable.CancelTrigger>
            </>
          ) : (
            <Editable.EditTrigger className={styles.EditTrigger}>
              <PencilIcon />
            </Editable.EditTrigger>
          )}
        </Editable.Control>
      )}
    </Editable.Context>
  </Editable.Root>
)

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { CheckIcon, PencilIcon, XIcon } from 'lucide-solid'
import { Show } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Controls = () => (
  <Editable.Root class={styles.Root} defaultValue="Click edit to start">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) => (
        <Editable.Control class={styles.Control}>
          <Show
            when={editable().editing}
            fallback={
              <Editable.EditTrigger class={styles.EditTrigger}>
                <PencilIcon />
              </Editable.EditTrigger>
            }
          >
            <Editable.SubmitTrigger class={styles.SubmitTrigger}>
              <CheckIcon />
            </Editable.SubmitTrigger>
            <Editable.CancelTrigger class={styles.CancelTrigger}>
              <XIcon />
            </Editable.CancelTrigger>
          </Show>
        </Editable.Control>
      )}
    </Editable.Context>
  </Editable.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import { CheckIcon, PencilIcon, XIcon } from 'lucide-vue-next'
import styles from 'styles/editable.module.css'
</script>

<template>
  <Editable.Root :class="styles.Root" defaultValue="Click edit to start">
    <Editable.Label :class="styles.Label">Label</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Input" />
      <Editable.Preview :class="styles.Preview" />
    </Editable.Area>
    <Editable.Context v-slot="{ editing }">
      <Editable.Control :class="styles.Control">
        <template v-if="editing">
          <Editable.SubmitTrigger :class="styles.SubmitTrigger">
            <CheckIcon />
          </Editable.SubmitTrigger>
          <Editable.CancelTrigger :class="styles.CancelTrigger">
            <XIcon />
          </Editable.CancelTrigger>
        </template>
        <Editable.EditTrigger v-else :class="styles.EditTrigger">
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.Context>
  </Editable.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import CheckIcon from 'lucide-svelte/icons/check'
  import PencilIcon from 'lucide-svelte/icons/pencil'
  import XIcon from 'lucide-svelte/icons/x'
  import styles from 'styles/editable.module.css'
</script>

<Editable.Root class={styles.Root} defaultValue="Click edit to start">
  <Editable.Label class={styles.Label}>Label</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Input} />
    <Editable.Preview class={styles.Preview} />
  </Editable.Area>
  <Editable.Context>
    {#snippet render(editable)}
      <Editable.Control class={styles.Control}>
        {#if editable().editing}
          <Editable.SubmitTrigger class={styles.SubmitTrigger}>
            <CheckIcon />
          </Editable.SubmitTrigger>
          <Editable.CancelTrigger class={styles.CancelTrigger}>
            <XIcon />
          </Editable.CancelTrigger>
        {:else}
          <Editable.EditTrigger class={styles.EditTrigger}>
            <PencilIcon />
          </Editable.EditTrigger>
        {/if}
      </Editable.Control>
    {/snippet}
  </Editable.Context>
</Editable.Root>

```

### Textarea

Use the `asChild` prop on `Editable.Input` to render a textarea for multi-line editing.

**Example: textarea**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import styles from 'styles/editable.module.css'

export const Textarea = () => (
  <Editable.Root
    className={styles.Root}
    placeholder="Enter a description..."
    defaultValue="Ark UI is a headless component library for building reusable, scalable design systems."
    activationMode="dblclick"
  >
    <Editable.Label className={styles.Label}>Description</Editable.Label>
    <Editable.Area className={styles.Area}>
      <Editable.Input className={styles.Textarea} asChild>
        <textarea />
      </Editable.Input>
      <Editable.Preview className={styles.Textarea} />
    </Editable.Area>
    <div className={styles.HelperText}>Press Cmd + Enter to save</div>
  </Editable.Root>
)

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import styles from 'styles/editable.module.css'

export const Textarea = () => (
  <Editable.Root
    class={styles.Root}
    placeholder="Enter a description..."
    defaultValue="Ark UI is a headless component library for building reusable, scalable design systems."
    activationMode="dblclick"
  >
    <Editable.Label class={styles.Label}>Description</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Textarea} asChild={(props) => <textarea {...props()} />} />
      <Editable.Preview class={styles.Textarea} />
    </Editable.Area>
    <div class={styles.HelperText}>Press Cmd + Enter to save</div>
  </Editable.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import styles from 'styles/editable.module.css'
</script>

<template>
  <Editable.Root
    :class="styles.Root"
    placeholder="Enter a description..."
    defaultValue="Ark UI is a headless component library for building reusable, scalable design systems."
    activationMode="dblclick"
  >
    <Editable.Label :class="styles.Label">Description</Editable.Label>
    <Editable.Area :class="styles.Area">
      <Editable.Input :class="styles.Textarea" asChild>
        <textarea />
      </Editable.Input>
      <Editable.Preview :class="styles.Textarea" />
    </Editable.Area>
    <div :class="styles.HelperText">Press Cmd + Enter to save</div>
  </Editable.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import styles from 'styles/editable.module.css'
</script>

<Editable.Root
  class={styles.Root}
  placeholder="Enter a description..."
  defaultValue="Ark UI is a headless component library for building reusable, scalable design systems."
  activationMode="dblclick"
>
  <Editable.Label class={styles.Label}>Description</Editable.Label>
  <Editable.Area class={styles.Area}>
    <Editable.Input class={styles.Textarea}>
      {#snippet asChild(props)}
        <textarea {...props()}></textarea>
      {/snippet}
    </Editable.Input>
    <Editable.Preview class={styles.Textarea} />
  </Editable.Area>
  <div class={styles.HelperText}>Press Cmd + Enter to save</div>
</Editable.Root>

```

### Field

The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

**Example: with-field**

#### React

```tsx
import { Editable } from '@ark-ui/react/editable'
import { Field } from '@ark-ui/react/field'
import field from 'styles/field.module.css'
import styles from 'styles/editable.module.css'

export const WithField = () => (
  <Field.Root className={field.Root}>
    <Editable.Root className={styles.Root} placeholder="Enter your bio">
      <Editable.Label className={field.Label}>Bio</Editable.Label>
      <Editable.Area className={styles.Area}>
        <Editable.Input className={styles.Input} />
        <Editable.Preview className={styles.Preview} />
      </Editable.Area>
    </Editable.Root>
    <Field.HelperText className={field.HelperText}>Click to edit your bio</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Bio is required</Field.ErrorText>
  </Field.Root>
)

```

#### Solid

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { Field } from '@ark-ui/solid/field'
import field from 'styles/field.module.css'
import styles from 'styles/editable.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <Editable.Root class={styles.Root} placeholder="Enter your bio">
      <Editable.Label class={field.Label}>Bio</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
    </Editable.Root>
    <Field.HelperText class={field.HelperText}>Double-click to edit your bio</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Bio is required</Field.ErrorText>
  </Field.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Editable } from '@ark-ui/vue/editable'
import { Field } from '@ark-ui/vue/field'
import field from 'styles/field.module.css'
import styles from 'styles/editable.module.css'
</script>

<template>
  <Field.Root :class="field.Root">
    <Editable.Root :class="styles.Root" placeholder="Enter your bio">
      <Editable.Label :class="field.Label">Bio</Editable.Label>
      <Editable.Area :class="styles.Area">
        <Editable.Input :class="styles.Input" />
        <Editable.Preview :class="styles.Preview" />
      </Editable.Area>
    </Editable.Root>
    <Field.HelperText :class="field.HelperText">Double-click to edit your bio</Field.HelperText>
    <Field.ErrorText :class="field.ErrorText">Bio is required</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Editable } from '@ark-ui/svelte/editable'
  import { Field } from '@ark-ui/svelte/field'
  import field from 'styles/field.module.css'
  import styles from 'styles/editable.module.css'
</script>

<Field.Root class={field.Root}>
  <Editable.Root class={styles.Root} placeholder="Enter your bio">
    <Editable.Label class={field.Label}>Bio</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
  </Editable.Root>
  <Field.HelperText class={field.HelperText}>Double-click to edit your bio</Field.HelperText>
  <Field.ErrorText class={field.ErrorText}>Bio is required</Field.ErrorText>
</Field.Root>

```

## Guides

### Auto-resizing

To auto-grow the editable as the content changes, set the `autoResize` prop to `true`.

```tsx
<Editable.Root placeholder="Placeholder" autoResize>
  {/*...*/}
</Editable.Root>
```

### Max Length

Use the `maxLength` prop to set a maximum number of characters that can be entered into the editable.

```tsx
<Editable.Root placeholder="Placeholder" autoResize maxLength={10}>
  {/*...*/}
</Editable.Root>
```

### Double Click

The editable supports two modes of activating the "edit" state:

- when the preview part is focused (with pointer or keyboard).
- when the preview part is double-clicked.

To change the mode to double-click, pass the prop `activationMode="dblclick"`.

```tsx
<Editable.Root placeholder="Placeholder" activationMode="dblclick">
  {/*...*/}
</Editable.Root>
```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `ActivationMode` | No | The activation mode for the preview element.

- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked
- "none" - Edit can be triggered programmatically only |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoResize` | `boolean` | No | Whether the editable should auto-resize to fit the content. |
| `defaultEdit` | `boolean` | No | Whether the editable is in edit mode by default. |
| `defaultValue` | `string` | No | The initial value of the editable when rendered.
Use when you don't need to control the value of the editable. |
| `disabled` | `boolean` | No | Whether the editable is disabled. |
| `edit` | `boolean` | No | Whether the editable is in edit mode. |
| `finalFocusEl` | `() => HTMLElement | null` | No | The element to receive focus when the editable is closed. |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  area: string
  label: string
  preview: string
  input: string
  control: string
  submitTrigger: string
  cancelTrigger: string
  editTrigger: string
}>` | No | The ids of the elements in the editable. Useful for composition. |
| `invalid` | `boolean` | No | Whether the input's value is invalid. |
| `maxLength` | `number` | No | The maximum number of characters allowed in the editable |
| `name` | `string` | No | The name attribute of the editable component. Used for form submission. |
| `onEditChange` | `(details: EditChangeDetails) => void` | No | Function to call when the edit mode changes. |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the value changes. |
| `onValueCommit` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is committed. |
| `onValueRevert` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is reverted. |
| `placeholder` | `string | { edit: string; preview: string }` | No | The placeholder text for the editable. |
| `readOnly` | `boolean` | No | Whether the editable is read-only. |
| `required` | `boolean` | No | Whether the editable is required. |
| `selectOnFocus` | `boolean` | No | Whether to select the text in the input when it is focused. |
| `submitMode` | `SubmitMode` | No | The action that triggers submit in the edit mode:

- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit |
| `translations` | `IntlTranslations` | No | The translations for the editable. |
| `value` | `string` | No | The controlled value of the editable. |


**Area Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | area |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-placeholder-shown]` | Present when placeholder is shown |


**CancelTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EditTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | label |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Preview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Preview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | preview |
| `[data-placeholder-shown]` | Present when placeholder is shown |
| `[data-readonly]` | Present when read-only |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseEditableReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SubmitTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `ActivationMode` | No | The activation mode for the preview element.

- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked
- "none" - Edit can be triggered programmatically only |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoResize` | `boolean` | No | Whether the editable should auto-resize to fit the content. |
| `defaultEdit` | `boolean` | No | Whether the editable is in edit mode by default. |
| `defaultValue` | `string` | No | The initial value of the editable when rendered.
Use when you don't need to control the value of the editable. |
| `disabled` | `boolean` | No | Whether the editable is disabled. |
| `edit` | `boolean` | No | Whether the editable is in edit mode. |
| `finalFocusEl` | `() => HTMLElement | null` | No | The element to receive focus when the editable is closed. |
| `form` | `string` | No | The associate form of the underlying input. |
| `ids` | `Partial<{
  root: string
  area: string
  label: string
  preview: string
  input: string
  control: string
  submitTrigger: string
  cancelTrigger: string
  editTrigger: string
}>` | No | The ids of the elements in the editable. Useful for composition. |
| `invalid` | `boolean` | No | Whether the input's value is invalid. |
| `maxLength` | `number` | No | The maximum number of characters allowed in the editable |
| `name` | `string` | No | The name attribute of the editable component. Used for form submission. |
| `onEditChange` | `(details: EditChangeDetails) => void` | No | Function to call when the edit mode changes. |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the value changes. |
| `onValueCommit` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is committed. |
| `onValueRevert` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is reverted. |
| `placeholder` | `string | { edit: string; preview: string }` | No | The placeholder text for the editable. |
| `readOnly` | `boolean` | No | Whether the editable is read-only. |
| `required` | `boolean` | No | Whether the editable is required. |
| `selectOnFocus` | `boolean` | No | Whether to select the text in the input when it is focused. |
| `submitMode` | `SubmitMode` | No | The action that triggers submit in the edit mode:

- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit |
| `translations` | `IntlTranslations` | No | The translations for the editable. |
| `value` | `string` | No | The controlled value of the editable. |


**Area Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | area |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-placeholder-shown]` | Present when placeholder is shown |


**CancelTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EditTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | label |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Preview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Preview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | preview |
| `[data-placeholder-shown]` | Present when placeholder is shown |
| `[data-readonly]` | Present when read-only |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseEditableReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SubmitTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `ActivationMode` | No | The activation mode for the preview element.

- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoResize` | `boolean` | No | Whether the editable should auto-resize to fit the content. |
| `defaultEdit` | `boolean` | No | Whether the editable is in edit mode by default. |
| `defaultValue` | `string` | No | The initial value of the editable when rendered.
Use when you don't need to control the value of the editable. |
| `disabled` | `boolean` | No | Whether the editable is disabled. |
| `edit` | `boolean` | No | Whether the editable is in edit mode. |
| `finalFocusEl` | `() => HTMLElement | null` | No | The element to receive focus when the editable is closed. |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  area: string
  label: string
  preview: string
  input: string
  control: string
  submitTrigger: string
  cancelTrigger: string
  editTrigger: string
}>` | No | The ids of the elements in the editable. Useful for composition. |
| `invalid` | `boolean` | No | Whether the input's value is invalid. |
| `maxLength` | `number` | No | The maximum number of characters allowed in the editable |
| `modelValue` | `string` | No | The v-model value of the editable |
| `name` | `string` | No | The name attribute of the editable component. Used for form submission. |
| `placeholder` | `string | { edit: string; preview: string }` | No | The placeholder text for the editable. |
| `readOnly` | `boolean` | No | Whether the editable is read-only. |
| `required` | `boolean` | No | Whether the editable is required. |
| `selectOnFocus` | `boolean` | No | Whether to select the text in the input when it is focused. |
| `submitMode` | `SubmitMode` | No | The action that triggers submit in the edit mode:

- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit |
| `translations` | `IntlTranslations` | No | The translations for the editable. |


**Area Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | area |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-placeholder-shown]` | Present when placeholder is shown |


**CancelTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EditTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | label |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Preview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Preview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | preview |
| `[data-placeholder-shown]` | Present when placeholder is shown |
| `[data-readonly]` | Present when read-only |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `EditableApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SubmitTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `ActivationMode` | No | The activation mode for the preview element.

- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked
- "none" - Edit can be triggered programmatically only |
| `autoResize` | `boolean` | No | Whether the editable should auto-resize to fit the content. |
| `defaultEdit` | `boolean` | No | Whether the editable is in edit mode by default. |
| `defaultValue` | `string` | No | The initial value of the editable when rendered.
Use when you don't need to control the value of the editable. |
| `disabled` | `boolean` | No | Whether the editable is disabled. |
| `edit` | `boolean` | No | Whether the editable is in edit mode. |
| `finalFocusEl` | `() => HTMLElement | null` | No | The element to receive focus when the editable is closed. |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  area: string
  label: string
  preview: string
  input: string
  control: string
  submitTrigger: string
  cancelTrigger: string
  editTrigger: string
}>` | No | The ids of the elements in the editable. Useful for composition. |
| `invalid` | `boolean` | No | Whether the input's value is invalid. |
| `maxLength` | `number` | No | The maximum number of characters allowed in the editable |
| `name` | `string` | No | The name attribute of the editable component. Used for form submission. |
| `onEditChange` | `(details: EditChangeDetails) => void` | No | Function to call when the edit mode changes. |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the value changes. |
| `onValueCommit` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is committed. |
| `onValueRevert` | `(details: ValueChangeDetails) => void` | No | Function to call when the value is reverted. |
| `placeholder` | `string | { edit: string; preview: string }` | No | The placeholder text for the editable. |
| `readOnly` | `boolean` | No | Whether the editable is read-only. |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the editable is required. |
| `selectOnFocus` | `boolean` | No | Whether to select the text in the input when it is focused. |
| `submitMode` | `SubmitMode` | No | The action that triggers submit in the edit mode:

- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit |
| `translations` | `IntlTranslations` | No | The translations for the editable. |
| `value` | `string` | No | The controlled value of the editable. |


**Area Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | area |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-placeholder-shown]` | Present when placeholder is shown |


**CancelTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseEditableContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**EditTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | label |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Preview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Preview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | editable |
| `[data-part]` | preview |
| `[data-placeholder-shown]` | Present when placeholder is shown |
| `[data-readonly]` | Present when read-only |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-autoresize]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseEditableReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**SubmitTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `editing` | `boolean` | Whether the editable is in edit mode |
| `empty` | `boolean` | Whether the editable value is empty |
| `value` | `string` | The current value of the editable |
| `valueText` | `string` | The current value of the editable, or the placeholder if the value is empty |
| `setValue` | `(value: string) => void` | Function to set the value of the editable |
| `clearValue` | `VoidFunction` | Function to clear the value of the editable |
| `edit` | `VoidFunction` | Function to enter edit mode |
| `cancel` | `VoidFunction` | Function to exit edit mode, and discard any changes |
| `submit` | `VoidFunction` | Function to exit edit mode, and submit any changes |


## Accessibility

### Keyboard Support

<KeyBindingsTable id="editable" />