Editable Text

Introduction

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

Examples

Edit title...

Edit multiline text...

Usage

EditableText

import React from "react";
import { EditableText } from "@commure/components-foundation";
function MyEditableText() {
return (
<EditableText placeholder="Edit title..."/>
);
}
export default MyEditableText;

API Reference

EditableText

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
confirmOnEnterKeyfalsebooleanIf `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.
defaultValuefalsestringDefault text value of uncontrolled input.
disabledfalsebooleanWhether the text can be edited.
intentfalseIntentVisual intent color to apply to element.
isEditingfalsebooleanWhether the component is currently being edited.
maxLengthfalsenumberMaximum number of characters allowed. Unlimited by default.
maxLinesfalsenumberMaximum number of lines before scrolling begins, when `multiline`.
minLinesfalsenumberMinimum number of lines (essentially minimum height), when `multiline`.
minWidthfalsenumberMinimum width in pixels of the input, when not `multiline`.
multilinefalsebooleanWhether the component supports multiple lines of text. This prop should not be changed during the component's lifetime.
placeholderfalsestringPlaceholder text when there is no value.
selectAllOnFocusfalsebooleanWhether the entire text field should be selected on focus. If `false`, the cursor is placed at the end of the text.
typefalsestringThe type of input that should be shown, when not `multiline`.
valuefalsestringText value of controlled input.

Related Reading

Blueprint Reference