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 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.
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 | - | |
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" |
Editable text can be used with any of the Text component sizes and weights.
Editable text can be used to allow multiline input.