Edit

A component that allows users to edit text in place, switching between a read-only and an editable state.

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
</script>

<template>
  <Edit.Root placeholder="Placeholder">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input aria-label="editable input" />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Control>
      <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
      <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
      <Edit.EditTrigger>Edit</Edit.EditTrigger>
    </Edit.Control>
  </Edit.Root>
</template>

import { Edit } from '@destyler-ui/react'

export function Basic() {
  return (
    <Edit.Root placeholder="Placeholder">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input aria-label="editable input" />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Control>
        <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
        <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
        <Edit.EditTrigger>Edit</Edit.EditTrigger>
      </Edit.Control>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'

export function Basic() {
  return (
    <Edit.Root placeholder="Placeholder">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
    </Edit.Root>
  )
}

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'
</script>

<Edit.Root placeholder="Placeholder">
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input aria-label="editable input" />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Control>
    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
    <Edit.EditTrigger>Edit</Edit.EditTrigger>
  </Edit.Control>
</Edit.Root>

Anatomy

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
</script>

<template>
  <Edit.Root>
    <Edit.Label />
    <Edit.Area>
      <Edit.Input />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Control>
      <Edit.EditTrigger />
      <Edit.SubmitTrigger />
      <Edit.CancelTrigger />
    </Edit.Control>
  </Edit.Root>
</template>

import { Edit } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Edit.Root>
      <Edit.Label />
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Control>
        <Edit.EditTrigger />
        <Edit.SubmitTrigger />
        <Edit.CancelTrigger />
      </Edit.Control>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Edit.Root>
      <Edit.Label />
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Control>
        <Edit.EditTrigger />
        <Edit.SubmitTrigger />
        <Edit.CancelTrigger />
      </Edit.Control>
    </Edit.Root>
  )
}

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'
</script>

<Edit.Root placeholder="Placeholder">
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Control>
    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
    <Edit.EditTrigger>Edit</Edit.EditTrigger>
  </Edit.Control>
</Edit.Root>

Examples

Basic

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
</script>

<template>
  <Edit.Root placeholder="Placeholder">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input aria-label="editable input" />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Control>
      <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
      <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
      <Edit.EditTrigger>Edit</Edit.EditTrigger>
    </Edit.Control>
  </Edit.Root>
</template>

import { Edit } from '@destyler-ui/react'

export function Basic() {
  return (
    <Edit.Root placeholder="Placeholder">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input aria-label="editable input" />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Control>
        <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
        <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
        <Edit.EditTrigger>Edit</Edit.EditTrigger>
      </Edit.Control>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'

export function Basic() {
  return (
    <Edit.Root placeholder="Placeholder">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
    </Edit.Root>
  )
}

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'
</script>

<Edit.Root placeholder="Placeholder">
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input aria-label="editable input" />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Control>
    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
    <Edit.EditTrigger>Edit</Edit.EditTrigger>
  </Edit.Control>
</Edit.Root>

Controlled

Control the edit state and value programmatically.

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
import { ref } from 'vue'

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

<template>
  <Edit.Root v-model="value" placeholder="Placeholder">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input aria-label="editable input" />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Context v-slot="{ editing }">
      <Edit.Control v-if="editing">
        <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
        <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
      </Edit.Control>
      <Edit.Control v-else>
        <Edit.EditTrigger>Edit</Edit.EditTrigger>
      </Edit.Control>
    </Edit.Context>
  </Edit.Root>
</template>

import { useState } from 'react'
import { Edit } from '@destyler-ui/react'

interface ControlledProps {
  activationMode?: 'focus' | 'click' | 'dblclick'
  placeholder?: string
}

export function Controlled({ activationMode = 'click', placeholder = 'Placeholder' }: ControlledProps) {
  const [value, setValue] = useState('')

  return (
    <Edit.Root
      placeholder={placeholder}
      activationMode={activationMode}
      value={value}
      onValueChange={details => setValue(details.value)}
    >
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input aria-label="editable input" />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Context>
        {context => (
          <>
            {context.editing
              ? (
                  <Edit.Control>
                    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
                    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
                  </Edit.Control>
                )
              : (
                  <Edit.Control>
                    <Edit.EditTrigger>Edit</Edit.EditTrigger>
                  </Edit.Control>
                )}
          </>
        )}
      </Edit.Context>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'
import { createSignal, mergeProps, Show } from 'solid-js'

interface ControlledProps {
  activationMode?: 'focus' | 'click' | 'dblclick'
  placeholder?: string
}

export function Controlled(props: ControlledProps) {
  const mergedProps = mergeProps(
    {
      activationMode: 'click' as const,
      placeholder: 'Placeholder',
    },
    props,
  )
  const [value, setValue] = createSignal('')

  return (
    <Edit.Root
      placeholder={mergedProps.placeholder}
      activationMode={mergedProps.activationMode}
      value={value()}
      onValueChange={details => setValue(details.value)}
    >
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input aria-label="editable input" />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Context>
        {edit => (
          <Edit.Control>
            <Show
              when={edit().editing}
              fallback={<Edit.EditTrigger>Edit</Edit.EditTrigger>}
            >
              <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
              <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
            </Show>
          </Edit.Control>
        )}
      </Edit.Context>
    </Edit.Root>
  )
}

<script module lang="ts">
  export interface ControlledProps {
    activationMode?: 'focus' | 'click' | 'dblclick'
    placeholder?: string
  }
</script>

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'

  let { activationMode = 'click', placeholder = 'Placeholder' }: ControlledProps = $props()
  let value = $state('')
</script>

<Edit.Root {activationMode} {placeholder} bind:value>
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input aria-label="editable input" />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Context>
    {#snippet render(edit)}
      {#if edit().editing}
        <Edit.Control>
          <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
          <Edit.CancelTrigger aria-label="cancel">Cancel</Edit.CancelTrigger>
        </Edit.Control>
      {:else}
        <Edit.Control>
          <Edit.EditTrigger>Edit</Edit.EditTrigger>
        </Edit.Control>
      {/if}
    {/snippet}
  </Edit.Context>
</Edit.Root>

Initial Value

Seed the initial text with defaultValue.

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
</script>

<template>
 <Edit.Root placeholder="Placeholder" default-value="Hello">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Control>
      <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
      <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
      <Edit.EditTrigger>Edit</Edit.EditTrigger>
    </Edit.Control>
  </Edit.Root>
</template>

import { Edit } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <Edit.Root placeholder="Placeholder" defaultValue="Hello">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Control>
        <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
        <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
        <Edit.EditTrigger>Edit</Edit.EditTrigger>
      </Edit.Control>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'

export function InitialValue() {
  return (
    <Edit.Root placeholder="Placeholder" defaultValue="Hello">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
    </Edit.Root>
  )
}

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'
</script>

<Edit.Root placeholder="Placeholder" defaultValue="Hello">
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Control>
    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
    <Edit.EditTrigger>Edit</Edit.EditTrigger>
  </Edit.Control>
</Edit.Root>

Custom Controls

Customize the edit, submit, and cancel controls.

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
import { ref } from 'vue'
const value = ref('Chakra')
</script>

<template>
  <Edit.Root placeholder="enter a value" v-model="value">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input />
      <Edit.Preview />
    </Edit.Area>
    <Edit.Context v-slot="{ editing }">
      <Edit.Control v-if="editing">
        <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
        <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
      </Edit.Control>
      <Edit.Control v-else>
        <Edit.EditTrigger>Edit</Edit.EditTrigger>
      </Edit.Control>
    </Edit.Context>
  </Edit.Root>
</template>

import { Edit } from '@destyler-ui/react'

export function CustomControls() {
  return (
    <Edit.Root placeholder="Placeholder">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Context>
        {context => (
          <>
            {context.editing
              ? (
                  <Edit.Control>
                    <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
                    <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
                  </Edit.Control>
                )
              : (
                  <Edit.Control>
                    <Edit.EditTrigger>Edit</Edit.EditTrigger>
                  </Edit.Control>
                )}
          </>
        )}
      </Edit.Context>
    </Edit.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'
import { Show } from 'solid-js'

export function CustomControls() {
  return (
    <Edit.Root placeholder="enter a value" defaultValue="Chakra">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
      <Edit.Context>
        {edit => (
          <Edit.Control>
            <Show
              when={edit().editing}
              fallback={<Edit.EditTrigger>Edit</Edit.EditTrigger>}
            >
              <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
              <Edit.CancelTrigger>Canvel</Edit.CancelTrigger>
            </Show>
          </Edit.Control>
        )}
      </Edit.Context>
    </Edit.Root>
  )
}

<script lang="ts">
  import { Edit } from '@destyler-ui/svelte'
</script>

<Edit.Root placeholder="Placeholder">
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input />
    <Edit.Preview />
  </Edit.Area>
  <Edit.Context>
    {#snippet render(edit)}
      {#if edit().editing}
        <Edit.Control>
          <Edit.SubmitTrigger>Save</Edit.SubmitTrigger>
          <Edit.CancelTrigger>Cancel</Edit.CancelTrigger>
        </Edit.Control>
      {:else}
        <Edit.Control>
          <Edit.EditTrigger>Edit</Edit.EditTrigger>
        </Edit.Control>
      {/if}
    {/snippet}
  </Edit.Context>
</Edit.Root>

With Field

Combine with a form field for validation and labeling.

<script setup lang="ts">
import { Edit } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Edit.Root placeholder="Placeholder" activationMode="dblclick">
      <Edit.Label>Label</Edit.Label>
      <Edit.Area>
        <Edit.Input />
        <Edit.Preview />
      </Edit.Area>
    </Edit.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { Edit } from '@destyler-ui/react'

interface WithFieldProps {
  required?: boolean
  disabled?: boolean
  readOnly?: boolean
  invalid?: boolean
}

export function WithField({ required, disabled, readOnly, invalid }: WithFieldProps) {
  return (
    <Field.Root invalid={invalid}>
      <Edit.Root
        placeholder="Placeholder"
        activationMode="dblclick"
        required={required}
        disabled={disabled}
        readOnly={readOnly}
        invalid={invalid}
      >
        <Edit.Label>Label</Edit.Label>
        <Edit.Area>
          <Edit.Input />
          <Edit.Preview />
        </Edit.Area>
      </Edit.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Edit } from '@destyler-ui/solid/edit'
import { Field } from '@destyler-ui/solid/field'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props} readOnly>
      <Edit.Root placeholder="Placeholder" activationMode="dblclick">
        <Edit.Label>Label</Edit.Label>
        <Edit.Area>
          <Edit.Input />
          <Edit.Preview />
        </Edit.Area>
      </Edit.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  export interface WithFieldProps {
    required?: boolean
    disabled?: boolean
    readOnly?: boolean
    invalid?: boolean
  }
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { Edit } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
</script>

<Field.Root invalid={props.invalid}>
  <Edit.Root placeholder="Placeholder" activationMode="dblclick" {...props}>
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input aria-label="editable input" />
      <Edit.Preview />
    </Edit.Area>
  </Edit.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { Edit, useEdit } from '@destyler-ui/vue'

const editable = useEdit({ placeholder: 'Placeholder' })
</script>

<template>
  <button @click="editable.edit()">Edit</button>

  <Edit.RootProvider :value="editable">
    <Edit.Label>Label</Edit.Label>
    <Edit.Area>
      <Edit.Input />
      <Edit.Preview />
    </Edit.Area>
  </Edit.RootProvider>
</template>

import { Edit, useEdit } from '@destyler-ui/react'

export function RootProvider() {
  const editable = useEdit({ placeholder: 'Placeholder' })

  return (
    <>
      <button type="button" onClick={() => editable.edit()}>Edit</button>

      <Edit.RootProvider value={editable}>
        <Edit.Label>Label</Edit.Label>
        <Edit.Area>
          <Edit.Input />
          <Edit.Preview />
        </Edit.Area>
      </Edit.RootProvider>
    </>
  )
}

import { Edit, useEdit } from '@destyler-ui/solid/edit'

export function RootProvider() {
  const edit = useEdit({ placeholder: 'Placeholder' })

  return (
    <>
      <button onClick={() => edit().edit()}>Edit</button>

      <Edit.RootProvider value={edit}>
        <Edit.Label>Label</Edit.Label>
        <Edit.Area>
          <Edit.Input />
          <Edit.Preview />
        </Edit.Area>
      </Edit.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Edit, useEdit } from '@destyler-ui/svelte'

  const id = $props.id()
  const editable = useEdit({ id, placeholder: 'Placeholder' })
</script>

<button type="button" onclick={() => editable().edit()}>Edit from API</button>
<Edit.RootProvider value={editable}>
  <Edit.Label>Label</Edit.Label>
  <Edit.Area>
    <Edit.Input />
    <Edit.Preview />
  </Edit.Area>
</Edit.RootProvider>

API Reference

Root

Prop	Default	Type
`activationMode`	`"focus"`	`"focus" \| "dblclick" \| "click"` 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`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoResize`	—	`false \| true` Whether the edit should auto-resize to fit the content.
`defaultEdit`	—	`false \| true` The initial edit state of the edit when it is first rendered. Use when you do not need to control its edit state.
`defaultValue`	—	`string` The initial value of the edit when it is first rendered. Use when you do not need to control the state of the edit.
`disabled`	—	`false \| true` Whether the edit is disabled
`edit`	—	`false \| true` Whether the edit is in edit mode.
`finalFocusEl`	—	`() => HTMLElement \| null` The element that should receive focus when the edit is closed. By default, it will focus on the trigger element.
`form`	—	`string` The associate form of the underlying input.
`id`	—	`string` 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; }>` The ids of the elements in the edit. Useful for composition.
`invalid`	—	`false \| true` Whether the input's value is invalid.
`maxLength`	—	`number` The maximum number of characters allowed in the edit
`modelValue`	—	`string`
`name`	—	`string` The name attribute of the edit component. Used for form submission.
`placeholder`	—	`string \| { edit: string; preview: string; }` The placeholder value to show when the `value` is empty
`readOnly`	—	`false \| true` Whether the edit is readonly
`required`	—	`false \| true` Whether the edit is required
`selectOnFocus`	`true`	`false \| true` Whether to select the text in the input when it is focused.
`submitMode`	`"both"`	`"none" \| "enter" \| "blur" \| "both"` The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the edit 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`	—	`edit.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states

Emit	Event
`editChange`	`[details: EditChangeDetails]` The callback that is called when the edit mode is changed
`focusOutside`	`[event: FocusOutsideEvent]` Function called when the focus is moved outside the component
`interactOutside`	`[event: InteractOutsideEvent]` Function called when an interaction happens outside the component
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Function called when the pointer is pressed down outside the component
`update:edit`	`[edit: boolean]` Event handler called when the edit state of the combobox changes.
`update:modelValue`	`[value: string]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` The callback that is called when the edit's value is changed
`valueCommit`	`[details: ValueChangeDetails]` The callback that is called when the edit's value is submitted.
`valueRevert`	`[details: ValueChangeDetails]` The callback that is called when the esc key is pressed or the cancel button is clicked

Area

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CancelTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

EditTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Preview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

SubmitTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`activationMode`	`"focus"`	`"focus" \| "dblclick" \| "click"` 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`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoResize`	—	`false \| true` Whether the editable should auto-resize to fit the content.
`defaultEdit`	—	`false \| true` The initial edit state of the editable when it is first rendered. Use when you do not need to control its edit state.
`defaultValue`	—	`string` The initial value of the editable when it is first rendered. Use when you do not need to control the state of the editable.
`disabled`	—	`false \| true` Whether the editable is disabled
`edit`	—	`false \| true` Whether the editable is in edit mode (controlled sync field / legacy seed). Phase 3: presence of `edit` is presence-controlled. There is no `defaultEdit` — omit `edit` and enter via gestures for uncontrolled usage.
`finalFocusEl`	—	`() => HTMLElement \| null` The element that should receive focus when the editable is closed. By default, it will focus on the trigger element.
`form`	—	`string` The associate form of the underlying input.
`id`	—	`string` 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; }>` The ids of the elements in the editable. Useful for composition.
`invalid`	—	`false \| true` Whether the input's value is invalid.
`maxLength`	—	`number` The maximum number of characters allowed in the editable
`name`	—	`string` The name attribute of the editable component. Used for form submission.
`onEditChange`	—	`(details: edit.EditChangeDetails) => void` The callback that is called when the edit mode is changed
`onFocusOutside`	—	`(event: calendar.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: calendar.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`(event: calendar.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: edit.ValueChangeDetails) => void` The callback that is called when the editable's value is changed
`onValueCommit`	—	`(details: edit.ValueChangeDetails) => void` The callback that is called when the editable's value is submitted.
`onValueRevert`	—	`(details: edit.ValueChangeDetails) => void` The callback that is called when the esc key is pressed or the cancel button is clicked
`placeholder`	—	`string \| { edit: string; preview: string; }` The placeholder value to show when the `value` is empty
`readOnly`	—	`false \| true` Whether the editable is readonly
`required`	—	`false \| true` Whether the editable is required
`selectOnFocus`	`true`	`false \| true` Whether to select the text in the input when it is focused.
`submitMode`	`"both"`	`"none" \| "enter" \| "blur" \| "both"` 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`	—	`edit.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The controlled value of the editable in both edit and preview mode

Area

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CancelTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseEditContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

EditTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Preview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseEditReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

SubmitTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`activationMode`	`"focus"`	`"focus" \| "dblclick" \| "click"` 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`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoResize`	—	`false \| true` Whether the editable should auto-resize to fit the content.
`defaultEdit`	—	`false \| true` The initial edit state of the edit when it is first rendered. Use when you do not need to control its edit state.
`defaultValue`	—	`string` The initial value of the edit when it is first rendered. Use when you do not need to control the state of the edit.
`disabled`	—	`false \| true` Whether the editable is disabled
`edit`	—	`false \| true` Whether the editable is in edit mode (controlled sync field / legacy seed). Phase 3: presence of `edit` is presence-controlled. There is no `defaultEdit` — omit `edit` and enter via gestures for uncontrolled usage.
`finalFocusEl`	—	`() => HTMLElement \| null` The element that should receive focus when the editable is closed. By default, it will focus on the trigger element.
`form`	—	`string` 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; }>` The ids of the elements in the editable. Useful for composition.
`invalid`	—	`false \| true` Whether the input's value is invalid.
`maxLength`	—	`number` The maximum number of characters allowed in the editable
`name`	—	`string` The name attribute of the editable component. Used for form submission.
`onEditChange`	—	`(details: edit.EditChangeDetails) => void` The callback that is called when the edit mode is changed
`onFocusOutside`	—	`(event: edit.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: edit.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`(event: edit.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: ValueChangeDetails) => void` The callback that is called when the editable's value is changed
`onValueCommit`	—	`(details: ValueChangeDetails) => void` The callback that is called when the editable's value is submitted.
`onValueRevert`	—	`(details: ValueChangeDetails) => void` The callback that is called when the esc key is pressed or the cancel button is clicked
`placeholder`	—	`string \| { edit: string; preview: string; }` The placeholder value to show when the `value` is empty
`readOnly`	—	`false \| true` Whether the editable is readonly
`required`	—	`false \| true` Whether the editable is required
`selectOnFocus`	`true`	`false \| true` Whether to select the text in the input when it is focused.
`submitMode`	`"both"`	`"none" \| "enter" \| "blur" \| "both"` 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`	—	`edit.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The controlled value of the editable in both edit and preview mode

Area

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CancelTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseEditContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

EditTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Preview

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseEditReturn`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

SubmitTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`activationMode`	`"focus"`	`"focus" \| "dblclick" \| "click"` 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
`autoResize`	—	`false \| true` Whether the editable should auto-resize to fit the content.
`defaultEdit`	—	`false \| true`
`defaultValue`	—	`string` The initial value when it is not controlled. Prefer this over seeding with `value` for uncontrolled usage.
`disabled`	—	`false \| true` Whether the editable is disabled
`edit`	—	`false \| true` Whether the editable is in edit mode (controlled sync field / legacy seed). Phase 3: presence of `edit` is presence-controlled. There is no `defaultEdit` — omit `edit` and enter via gestures for uncontrolled usage.
`finalFocusEl`	—	`() => HTMLElement \| null` The element that should receive focus when the editable is closed. By default, it will focus on the trigger element.
`form`	—	`string` The associate form of the underlying input.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; area: string; label: string; preview: string; input: string; control: string; submitTrigger: string; cancelTrigger: string; editTrigger: string; }>` The ids of the elements in the editable. Useful for composition.
`invalid`	—	`false \| true` Whether the input's value is invalid.
`maxLength`	—	`number` The maximum number of characters allowed in the editable
`name`	—	`string` The name attribute of the editable component. Used for form submission.
`onEditChange`	—	`(details: import("@destyler/edit").EditChangeDetails) => void` The callback that is called when the edit mode is changed
`onFocusOutside`	—	`(event: import("@destyler/calendar").FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: import("@destyler/calendar").InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`(event: import("@destyler/calendar").PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: import("@destyler/edit").ValueChangeDetails) => void` The callback that is called when the editable's value is changed
`onValueCommit`	—	`(details: import("@destyler/edit").ValueChangeDetails) => void` The callback that is called when the editable's value is submitted.
`onValueRevert`	—	`(details: import("@destyler/edit").ValueChangeDetails) => void` The callback that is called when the esc key is pressed or the cancel button is clicked
`placeholder`	—	`string \| { edit: string; preview: string; }` The placeholder value to show when the `value` is empty
`readOnly`	—	`false \| true` Whether the editable is readonly
`required`	—	`false \| true` Whether the editable is required
`selectOnFocus`	`true`	`false \| true` Whether to select the text in the input when it is focused.
`submitMode`	`"both"`	`"none" \| "enter" \| "blur" \| "both"` 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`	—	`import("@destyler/edit").IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The controlled value of the editable in both edit and preview mode

Area

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

CancelTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseEditContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

EditTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Preview

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseEditReturn`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

SubmitTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`