Editable Heading

Editable heading allows user to edit the name of some resource in the same place as it's displayed.

#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.

#Disabled

#Skeleton

The editable heading has a skeleton state.

#Guidelines

#When to use

• As a quick way to edit the name of some resource, without redirecting to a dedicated settings page.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	false	boolean Determines if heading is editable.
placeholder	—	string The placeholder text to use when the field is empty.
size	"md"	"md" | "lg" | "xl" | "2xl" Heading size.
value	—	string Heading text.
width	"auto"	"auto" | "100%" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" Width of the entire component.
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.
contentRef	—	React.Ref<HTMLSpanElement> Ref to the actual span displaying text when not editing.