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.

EditableText

Overview

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

This text is an editable text

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
-
multiline
Enables editing multiple lines of text
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 Text type
"text1""text2""text3"
"text2"
value*
Value of the text
string
-
weight
Sets the Text weight
"bold""medium""normal"
"normal"

Usage

➡️Use when you want to allow the user to edit an existing 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 existing text. To allow users to fill empty text fields, for example in a form, consider using TextField

Variants

Text types

Editable text can be used with any of the Text component sizes and weights.

Text1 Normal
Text1 Medium
Text1 Bold
Text2 Normal
Text2 Medium
Text2 Bold
Text3 Normal
Text3 Medium
<div className={styles.typesContainer}>
<div className={styles.typeContainer}>
<EditableText
type={EditableText.types.TEXT1}
weight={EditableText.weights.NORMAL}
value="Text1 Normal"
className={styles.editableText}
/>
<EditableText
type={EditableText.types.TEXT1}
weight={EditableText.weights.MEDIUM}
value="Text1 Medium"
className={styles.editableText}
/>
<EditableText
type={EditableText.types.TEXT1}
weight={EditableText.weights.BOLD}
value="Text1 Bold"
className={styles.editableText}
/>
</div>
<div className={styles.typeContainer}>
<EditableText
type={EditableText.types.TEXT2}
weight={EditableText.weights.NORMAL}
value="Text2 Normal"
className={styles.editableText}
/>
<EditableText
type={EditableText.types.TEXT2}
weight={EditableText.weights.MEDIUM}
value="Text2 Medium"
className={styles.editableText}
/>
<EditableText
type={EditableText.types.TEXT2}

Multiline

Editable text can be used to allow multiline input.

This is a multiline here's the second line
<EditableText
type={EditableText.types.TEXT1}
weight={EditableText.weights.NORMAL}
multiline
value={`This is a multiline
here's the second line`}
className={styles.editableText}
/>