# TextInput >![](../../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. The **** component provides single-line text input. ## Required Permissions None ## Child Components None ## APIs TextInput\(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
type	InputType	InputType.Normal	Input box type.
placeholderColor	Color	-	Placeholder color.
placeholderFont	{ size?: Length, 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.
enterKeyType	EnterKeyType	EnterKeyType.Done	How the Enter key is labeled.
caretColor	Color	-	Color of the caret (also known as the text insertion cursor).
maxLength	number	-	Maximum number of characters in the text input.

- EnterKeyType enums

Name	Description
Go	The Enter key is labeled "Go."
Search	The Enter key is labeled "Search."
Send	The Enter key is labeled "Send."
Next	The Enter key is labeled "Next."
Done	The Enter key is labeled "Done."

- InputType enums

Name	Description
Normal	Normal input mode.
Password	Password input mode.
Email	Email address input mode.
Number	Digit input mode.

## Events

Name		Description
onChange(value: string) => void		Triggered when the input changes.
onSubmit(callback: (enterKey: EnterKeyType) => void)		Triggered when the Enter key on the physical or soft keyboard is pressed.
onEditChanged(callback: (isEditing: boolean) => void)		Triggered when the input status changes.

## Example ``` @Entry @Component struct TextInputTest { @State text: string = '' @State text1: string = '' @State text2: string = '' build() { Column() { TextInput({ placeholder: 'input your word' }) .type(InputType.Normal) .placeholderColor(Color.Blue) .placeholderFont({ size: 40, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal }) .enterKeyType(EnterKeyType.Next) .caretColor(Color.Green) .height(60) .fontSize(30) .fontWeight(FontWeight.Bold) .fontFamily("cursive") .fontStyle(FontStyle.Italic) .fontColor(Color.Red) .maxLength(20) .onChange((value: string) => { this.text = value }) .onSubmit((enterKey) => { this.text1 = 'onSubmit' }) .onEditChanged((isEditing) => { this.text2 = 'onEditChanged' }) Text(this.text) Text(this.text1) Text(this.text2) } } } ``` ![](figures/textinput1.gif)