hightouch

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.
`size`	`"md"`	`"md" \| "lg" \| "xl" \| "2xl"` Heading size.
`value`	—	`string` Heading text.
`width`	`"lg"`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl"` Width of the entire component in editable state.
`onChange`	—	`(value: string) => void` Callback invoked when user changes input.
`onCancel`	—	`(value: string) => void` Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.
`onSubmit`	—	`(value: string) => void` Callback invoked when user confirms value.

On this page

Example
Guidelines

When to use
Props