Editable

A component that allows users to modify its content.

Label

Double click to edit

Anatomy

Usage

<script>
  import {Editable} from 'ui-ingredients';

  let value = $state('Hello world!');
</script>

<Editable.Root>
  <Editable.Label>Label</Editable.Label>

  <Editable.Area>
    <Editable.Input />
    <Editable.Preview />
  </Editable.Area>

  <Editable.EditTrigger>Edit</Editable.EditTrigger>
  <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
  <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
</Editable.Root>

Usage with Field component

<script>
  import {Editable, Field} from 'ui-ingredients';
</script>

<Field.Root>
  <Editable.Root>
    <Editable.Label>Label</Editable.Label>

    <Editable.Area>
      <Editable.Input />
      <Editable.Preview />
    </Editable.Area>

    <Editable.EditTrigger>Edit</Editable.EditTrigger>
    <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
    <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
  </Editable.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`activationMode`	`"focus"`	`ActivationMode` 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`		`boolean` Whether the editable should auto-resize to fit the content.
`defaultEdit`		`boolean` Whether the editable is in edit mode by default.
`defaultValue`		`string` The initial value of the editable when rendered. Use when you don't need to control the value of the editable.
`disabled`		`boolean` Whether the editable is disabled.
`edit`		`boolean` Whether the editable is in edit mode.
`finalFocusEl`		`() => HTMLElement` The element to receive focus when the editable is closed.
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`{ 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`		`boolean` 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: EditChangeDetails) => void` Function to call when the edit mode changes.
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the value changes.
`onValueCommit`		`(details: ValueChangeDetails) => void` Function to call when the value is committed.
`onValueRevert`		`(details: ValueChangeDetails) => void` Function to call when the value is reverted.
`placeholder`		`string \| { edit: string; preview: string; }` The placeholder text for the editable.
`readOnly`		`boolean` Whether the editable is read-only.
`required`		`boolean` Whether the editable is required.
`selectOnFocus`	`true`	`boolean` Whether to select the text in the input when it is focused.
`submitMode`	`"both"`	`SubmitMode` 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` The translations for the editable.
`value`		`string` The controlled value of the editable.
`asChild`		`Snippet` Render a different element.

Area

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

CancelTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

EditTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Input

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	label
`data-scope`	editable

Preview

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

SubmitTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Accessibility

Keyboard Support

Key	Description
Enter	Saves the edited content and exits edit mode.
Escape	Discards the changes and exits edit mode.