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.

NameDefaultDescription
isDisabledfalseboolean

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