Textarea

Code Demo

Component Type

Basic textarea

在 Stackblitz 中打开

textarea with title

在 Stackblitz 中打开

Automatically raises textarea

在 Stackblitz 中打开

Set the maximum number of characters

在 Stackblitz 中打开

Set the maximum number of characters. One Chinese character means two characters

在 Stackblitz 中打开

Component Status

Disable textarea

DEMO (🚧建设中)...

Customize Component Style

Label external input box

在 Stackblitz 中打开

Textarea Props

name type default description required
className String - className of component N
style Object - CSS(Cascading Style Sheets),Typescript:React.CSSProperties N
allowInputOverMax Boolean false - N
autofocus Boolean false - N
autosize Boolean / Object false Typescript:boolean | { minRows?: number; maxRows?: number } N
bordered Boolean false - N
disabled Boolean undefined - N
indicator Boolean false - N
label TNode - Typescript:string | TNodesee more ts definition N
layout String horizontal options: vertical/horizontal N
maxcharacter Number - - N
maxlength Number - - N
name String - - N
placeholder String undefined - N
readonly Boolean undefined - N
value String / Number - Typescript:TextareaValue type TextareaValue = string | numbersee more ts definition N
defaultValue String / Number - uncontrolled property。Typescript:TextareaValue type TextareaValue = string | numbersee more ts definition N
onBlur Function Typescript:(value: TextareaValue, context: { e: FocusEvent }) => void
N
onChange Function Typescript:(value: TextareaValue, context?: { e?: InputEvent }) => void
N
onCompositionend Function Typescript:(value: string, context: { e: CompositionEvent }) => void
trigger on compositionend
N
onCompositionstart Function Typescript:(value: string, context: { e: CompositionEvent }) => void
trigger on compositionstart
N
onFocus Function Typescript:(value: TextareaValue, context : { e: FocusEvent }) => void
N

何时使用

需要进行文字输入,且需填写的字数较多时使用。

常见用法

常见于表单、内容发布的场景中,用于输入较长的文本内容。

推荐/慎用示例

尽量避免输入过于复杂的文本内容,考虑将内容拆分,让用户分步输入。

建议根据待输入的内容决定多行文本框的高度。

相似组件

组件名 何时使用
输入框 需要进行文字输入,且需填写的字数较少时使用。