No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

EditableHeading

Overview

Editable Heading allows users to seamlessly and dynamically edit in-line content. Its default state is a read-view, based on the Heading component, and it becomes editable after clicking on it.

This heading is an editable heading

Import

Props

NameDescriptionDefaultControl
ariaLabel
ARIA Label
string
-
autoSelectTextOnEditMode
If true, automatically select all text when entering edit mode
boolean
-
className
string
-
data-testid
string
-
id
string
-
isEditMode
Controls the mode of the component (i.e. view/edit mode)
boolean
-
onChange
Will be called whenever the current value changes to a non-empty value
(value: string) => void
--
onClick
Will be called whenever the component gets clicked
(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void
--
onEditModeChange
Will be called when the mode of the component changes
(isEditMode: boolean) => void
--
placeholder
Shown in edit mode when the text value is empty
string
-
readOnly
Disables editing mode - component will be just a typography element
boolean
-
tooltipProps
Override Tooltip props when needed
Partial<TooltipProps>
-
type
Sets the Heading type
"h1""h2""h3"
"h1"
value*
Value of the text
string
-
weight
Sets the Heading weight
"light""bold""medium""normal"
"normal"

Usage

➡️Use when you want to allow the user to edit an existing heading text➡️This component grows relative to its content, and its maximum width is 100% of its container
🤓Am I using the right component?
This component is used for editing text size 18px and up. For editing smaller text sizes, consider using EditableText

Variants

Heading types

Editable heading can be used with any of the Heading component sizes and weights.

H1 Light

H1 Normal

H1 Medium

H1 Bold

H2 Light

H2 Normal

H2 Medium

H2 Bold

H3 Light

H3 Normal

H3 Medium

H3 Bold

<div className={styles.typesContainer}>
<div className={styles.typeContainer}>
<EditableHeading
type={EditableHeading.types.H1}
weight={EditableHeading.weights.LIGHT}
value="H1 Light"
className={styles.editableHeading}
/>
<EditableHeading
type={EditableHeading.types.H1}
weight={EditableHeading.weights.NORMAL}
value="H1 Normal"
className={styles.editableHeading}
/>
<EditableHeading
type={EditableHeading.types.H1}
weight={EditableHeading.weights.MEDIUM}
value="H1 Medium"
className={styles.editableHeading}
/>
<EditableHeading
type={EditableHeading.types.H1}
weight={EditableHeading.weights.BOLD}
value="H1 Bold"
className={styles.editableHeading}
/>
</div>
<div className={styles.typeContainer}>
<EditableHeading
type={EditableHeading.types.H2}
weight={EditableHeading.weights.LIGHT}
value="H2 Light"
className={styles.editableHeading}
/>
<EditableHeading
type={EditableHeading.types.H2}