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.
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.
Name | Description | Default | Control |
---|---|---|---|
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" |
Editable heading can be used with any of the Heading component sizes and weights.