Editable heading

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

#Usage

#Basic

#Truncated heading

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

#Action shape

Set actionShape="circle" when the heading sits in a pill-shaped bar, so the confirm and cancel buttons nest in its rounded ends.

#Disabled

#Skeleton

The editable heading has a skeleton state.

#Combinations

#Guidelines

#When to use

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

#When not to use

• If the name is edited as part of a form or settings page, use a text input in a form field instead.
• If the text is not a heading, use an editable text instead.

#Props

Inherits margin props.

Name	Default	Description
inputProps	—	Pick<InputProps, "maxLength" | "minLength">The input props
actionShape	"default"	"default" | "circle"Shape of the confirm and cancel buttons. Use circle inside a pill-shaped bar, so the buttons nest in its rounded ends.
autoFocus	false	booleanStart in edit mode with the input focused on mount. Ignored when the heading is disabled or in a skeleton state.
isDisabled	false	booleanDetermines if heading is editable.
placeholder	—	stringThe placeholder text to use when the field is empty.
size	"md"	"md" | "lg"Size of the heading.
value	—	stringHeading value.
width	undefined	"100%" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"Width of the component.
onChange	—	(value: string) => voidCallback invoked when user confirms the new value.
onCancel	—	(value: string) => voidCallback invoked when user cancels input with the Esc key. It provides the last confirmed value as argument.