Editable heading allows user to edit the name of some resource in the same place as it's displayed.
The preview value and input should automatically fit the parent container's space. If a specific width is wanted, use the width
prop.
The editable heading has a skeleton state.
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. |