Editable Heading

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

#

#

#

#

#

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

#

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`	`"lg"`	`"auto" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl"` Width of the entire component in editable state.
`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.

On this page

Usage

Basic
Disabled
Guidelines
When to use
Props