Editable

An interface for users to switch between a read-only and an editable state.

Usage

Used for inline editing of text. It consists of a preview state that can be toggled into an edit state.

import { Editable } from "@elemnts-ui/react";

<Editable.Root placeholder="Click to edit" defaultValue="Hello World">
  <Editable.Label>Label</Editable.Label>
  <Editable.Area>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Area>
</Editable.Root>;

Custom Controls

You can use Editable.Control and Editable.Context to render custom triggers based on the editing state.

API Reference

EditableRoot

The root container for the editable.

Prop	Type	Default
activationMode	`ActivationMode`	`focus`
asChild	`boolean`	`undefined`
autoResize	`boolean`	`undefined`
defaultEdit	`boolean`	`undefined`
defaultValue	`string`	`undefined`
disabled	`boolean`	`undefined`
edit	`boolean`	`undefined`
finalFocusEl	`() => HTMLElement \| null`	`undefined`
form	`string`	`undefined`
id	`string`	`undefined`
ids	`Partial<{ root: string; area: string; label: string; preview: string; input: string; control: string; submitTrigger: string; cancelTrigger: string; editTrigger: string; }>`	`undefined`
invalid	`boolean`	`undefined`
maxLength	`number`	`undefined`
name	`string`	`undefined`
onEditChange	`(details: EditChangeDetails) => void`	`undefined`
onFocusOutside	`(event: FocusOutsideEvent) => void`	`undefined`
onInteractOutside	`(event: InteractOutsideEvent) => void`	`undefined`
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	`undefined`
onValueChange	`(details: ValueChangeDetails) => void`	`undefined`
onValueCommit	`(details: ValueChangeDetails) => void`	`undefined`
onValueRevert	`(details: ValueChangeDetails) => void`	`undefined`
placeholder	`string \| { edit: string; preview: string }`	`undefined`
readOnly	`boolean`	`undefined`
required	`boolean`	`undefined`
selectOnFocus	`boolean`	`true`
submitMode	`SubmitMode`	`both`
translations	`IntlTranslations`	`undefined`
value	`string`	`undefined`

EditableRootProvider

Provides the editable state from useEditable to its child components.

Prop	Type	Default
value	`UseEditableReturn`	required
asChild	`boolean`	`false`

EditableArea

The container for the editable preview and input.

Prop	Type	Default
asChild	`boolean`	`false`

EditableLabel

The label for the editable.

Prop	Type	Default
asChild	`boolean`	`false`

EditablePreview

Displays the editable value when it is not being edited.

Prop	Type	Default
asChild	`boolean`	`false`

EditableInput

The input for editing the value.

Prop	Type	Default
asChild	`boolean`	`false`

EditableControl

The container for editable action triggers.

Prop	Type	Default
asChild	`boolean`	`false`

EditableEditTrigger

Triggers edit mode.

Prop	Type	Default
asChild	`boolean`	`false`

EditableSubmitTrigger

Commits the current value and exits edit mode.

Prop	Type	Default
asChild	`boolean`	`false`

EditableCancelTrigger

Reverts the current value and exits edit mode.

Prop	Type	Default
asChild	`boolean`	`false`