# TextArea >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. Provides the multi-line text input component. ## Required Permissions None ## Child Component N/A ## APIs TextArea\(value?: \{ placeholder?: string \}\) - Parameters

Name

Type

Mandatory

Default Value

Description

placeholder

string

No

-

Text displayed when there is no input.
## Attributes In addition to the attributes in [Universal Attributes](ts-universal-attributes.md), the following attributes are supported.

Name

Type

Default Value

Description

placeholderColor

Color

-

Placeholder text color.

placeholderFont

{

size?: number,

weight?:number | FontWeight,

family?: string,

style?: FontStyle

}

-

Placeholder text style.

  • size: font size. If the value is of the number type, the unit fp is used.
  • weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.
  • family: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is Arial, sans-serif.
  • style: font style.

textAlign

TextAlign

TextAlign.Start

Sets the text horizontal alignment mode.

caretColor

Color

-

Sets the color of the cursor in the text box.
- TextAlign enumeration description

Name

Description

Start

Aligns the header horizontally.

Center

Horizontal center alignment.

End

Align the tail horizontally.
## Events

Name

Description

onChange(callback: (value: string) => void)

When the input changes, the callback function is triggered.
## Example ``` @Entry @Component struct TextAreaExample { @State text: string = '' build() { Column() { TextArea({ placeholder: 'input your word' }) .placeholderColor("rgb(0,0,225)") .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) .textAlign(TextAlign.Center) .caretColor(Color.Blue) .height(50) .fontSize(30) .fontWeight(FontWeight.Bold) .fontFamily("sans-serif") .fontStyle(FontStyle.Normal) .fontColor(Color.Red) .onChange((value: string) => { this.text = value }) Text(this.text).width('90%') } } } ``` ![](figures/textarea1.gif)