The heading component with optional editability. When editable is true, the heading becomes editable on focus, with accessibility and onChange support. Optionally, a hidden input can store the value for form submission.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
childrenJSX.Element

React element children (ignored when editable).

contentstring

The text content.

customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

sizestring

The font size for the heading.

spacingstring | number | Array | object

The spacing for the component.

tagNamestring

The tag used for the heading, from h1 to h6.

typestring

The type of the heading, one of regular or boxed.

weightstring

The font weight for the heading.

editableboolean

Whether the heading is editable on focus (default false).

onChangefunction

Handler for text changes when editable.

namestring

Optional name attribute when editable.

idstring

Optional id attribute when editable.

useHiddenInputboolean

Whether to include a hidden input for form submission (default false).

refobject | null

Ref to the component.

Since
  • 1.1.15
Source
Returns:

The heading component.

Type: 
JSX.Element
Example
// Controlled usage
const [heading, setHeading] = useState("Editable Heading");
<Heading tagName="h2" content={heading} editable onChange={setHeading} />

// Self-managed form usage
<form>
  <Heading tagName="h2" content="Editable Heading" editable useHiddenInput name="heading" id="heading-1" />
  <button type="submit">Submit</button>
</form>