EditableText

EditableText(__namedParameters): ReactElement

Defined in: src/components/primitives/EditableText/EditableText.tsx:60

Text that looks like <Text> but turns into an inline editor when the user activates it — the editor-UI pattern for renaming layers, nodes, assets, and scene objects in place.

The idle state renders a real <Text> (so it inherits every typography prop), and the editing state renders a chrome-less <input> that shares the exact same typography recipe, so the swap is visually seamless. The edit field auto-sizes to its content via a hidden sizer — no measurement effects.

Editing commits on Enter (and on blur when submitOnBlur), cancels on Escape. onChange fires on commit only, with the new value.

Parameters

__namedParameters

activationMode?

EditableTextActivationMode = 'single'

How a pointer starts an edit session.

Default

'single'

align?

TextAlign

Text alignment, matching Text.

aria-label?

string

Explicit accessible name. Wins over the value/placeholder-derived name and over labels.editLabel.

as?

TextElement = 'span'

HTML element rendered for the display (idle) state.

Default

'span'

className?

string

Additional CSS class name applied to the current root element.

color?

TextColor = 'primary'

Text color, matching Text.

Default

'primary'

defaultValue?

string

Initial committed value (uncontrolled).

disabled?

boolean = false

Disable the field entirely — no editing, no hover affordance, not focusable.

Default

false

labels?

Partial<EditableTextLabels>

String overrides for localization. Pass a stable reference (memoize it) — it is low-frequency config.

lineHeight?

TextLineHeight

Line height, matching Text.

maxLength?

number

Maximum number of characters accepted by the edit field.

mono?

boolean = false

Use the monospace font family (also implied by variant="code").

onChange?

(value) => void

Called with the new value when an edit is committed. Fires on commit only (Enter / blur), not on every keystroke.

onEditEnd?

(reason) => void

Called when an edit session ends, with the reason.

onEditStart?

() => void

Called when an edit session starts.

onKeyDown?

(event) => void

Key-down handler forwarded to the edit field (runs after built-ins).

placeholder?

string

Placeholder shown when the value is empty, both in the display and the edit field. Rendered in the muted placeholder color.

readOnly?

boolean = false

Render the value but do not allow editing. Still selectable/focusable.

Default

false

ref?

Ref<EditableTextHandle>

Imperative handle — see EditableTextHandle.

selectOnEdit?

boolean = true

Select the whole value when an edit session starts.

Default

true

size?

TextSize

Text size, matching Text. Overrides the variant size.

style?

CSSProperties

Inline styles applied to the current root element.

submitOnBlur?

boolean = true

Commit the draft when the edit field loses focus. When false, blurring discards the draft instead.

Default

true

testId?

string

Test identifier for automated testing.

truncate?

boolean = false

Truncate the display text with an ellipsis on overflow.

value?

string

The committed text value (controlled).

variant?

TextVariant = 'body'

Semantic typography variant, matching Text.

Default

'body'

weight?

TextWeight

Text weight, matching Text. Overrides the variant weight.

Returns

ReactElement

Example

// Uncontrolled — click the text to rename in place
<EditableText defaultValue="Untitled Layer" onChange={setName} />

// Controlled, heading-styled, double-click to edit (rename convention)
<EditableText
  variant="heading"
  value={name}
  onChange={setName}
  activationMode="double"
  placeholder="Name this node"
/>