Editable text

Editable text allows user to edit text in the same place as it's displayed — for changing a label or name in place without a form field.

#Usage

#Basic

#Truncated text

The preview value and input should automatically fit the parent container's space. If a specific width is wanted, use the width prop.

#Left action

Use leftAction to show a custom button before the confirm and cancel buttons when editing. An icon indicator appears inline when usedActionTooltip is provided, and the button can be shown on empty values via showOnEmpty.

#Disabled

#Skeleton

The editable text has a skeleton state.

#Combinations

#Guidelines

#When to use

• Used for infrequently edited text

#When not to use

• If the text is edited frequently or as part of a form, use a text input in a form field instead.
• If editing a resource name displayed as a heading, use an editable heading instead.
• If editing a multi-line description of a resource, use an editable description instead.

#Props

Inherits Text props.

Name	Default	Description
fontWeight	"normal"	"normal" | "medium" | "semibold" Font weight
inputProps	—	Pick<InputProps, "maxLength" | "minLength"> The input props
isDisabled	false	boolean Determines if text is editable.
placeholder	—	string The placeholder text to use when the field is empty.
size	"md"	"sm" | "md" | "lg" Size of the text.
value	—	string Text value.
width	undefined	"100%" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" Width of the component.
leftAction	—	EditableLeftActionProps Show a custom button before the confirm and cancel buttons. The object passed to this prop should be stable between renders to avoid unnecessary re-renders.
onChange	—	(value: string) => void Callback invoked when user confirms the new value.
onCancel	—	(value: string) => void Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.