Components

Editable

Editable is an input field used for editing a single line of text. It renders as static text and transforms into a text input field when then edit interaction is triggered (click, focus, or double-click).

API Reference

Root

Prop	Type	Default
activationMode	ActivationMode	"focus"
asChild	boolean
autoResize	boolean
defaultValue	string
dir	'ltr' \| 'rtl'	"ltr"
disabled	boolean
finalFocusEl	() => HTMLElement \| null
form	string
getRootNode	() => ShadowRoot \| Node \| Document
id	string
ids	Partial<{ root: string area: string label: string preview: string input: string controls: string submitTrigger: string cancelTrigger: string editTrigger: string }>
invalid	boolean
maxLength	number
name	string
onEdit	() => void
onFocusOutside	(event: FocusOutsideEvent) => void
onInteractOutside	(event: InteractOutsideEvent) => void
onPointerDownOutside	(event: PointerDownOutsideEvent) => void
onValueChange	(details: ValueChangeDetails) => void
onValueCommit	(details: ValueChangeDetails) => void
onValueRevert	(details: ValueChangeDetails) => void
placeholder	string \| { edit: string; preview: string }
readOnly	boolean
selectOnFocus	boolean
startWithEditView	boolean
submitMode	SubmitMode	"enter"
translations	IntlTranslations
value	string

Area

Prop	Type	Default
asChild	boolean

Input

Prop	Type	Default
asChild	boolean

Label

Prop	Type	Default
asChild	boolean

Control

Prop	Type	Default
asChild	boolean

Preview

Prop	Type	Default
asChild	boolean

EditTrigger

Prop	Type	Default
asChild	boolean

CancelTrigger

Prop	Type	Default
asChild	boolean

SubmitTrigger

Prop	Type	Default
asChild	boolean