Introduction

EditableText appears as normal UI text but transforms into a text input field when the user focuses it.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Edit title...
Edit code

Edit multiline text...
Edit code

Usage

EditableText

1import React from "react";
2import { EditableText } from "@commure/components-foundation";
3
4function MyEditableText() {
5  return <EditableText placeholder="Edit title..." />;
6}
7
8export default MyEditableText;

API Reference

EditableText

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
confirmOnEnterKey	false	boolean	If `true` and in multiline mode, the `enter` key will trigger onConfirm and `mod+enter` will insert a newline. If `false`, the key bindings are inverted such that `enter` adds a newline.
defaultValue	false	string	Default text value of uncontrolled input.
disabled	false	boolean	Whether the text can be edited.
intent	false	Intent	Visual intent color to apply to element.
isEditing	false	boolean	Whether the component is currently being edited.
maxLength	false	number	Maximum number of characters allowed. Unlimited by default.
maxLines	false	number	Maximum number of lines before scrolling begins, when `multiline`.
minLines	false	number	Minimum number of lines (essentially minimum height), when `multiline`.
minWidth	false	number	Minimum width in pixels of the input, when not `multiline`.
multiline	false	boolean	Whether the component supports multiple lines of text. This prop should not be changed during the component's lifetime.
placeholder	false	string	Placeholder text when there is no value.
selectAllOnFocus	false	boolean	Whether the entire text field should be selected on focus. If `false`, the cursor is placed at the end of the text.
type	false	string	The type of input that should be shown, when not `multiline`.
value	false	string	Text value of controlled input.

Related Reading

Blueprint Reference