TextInput

The TextInput component provides single-line text input.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

This component supports plain text only. For rich text, use the RichEditor component.

Child Components

Not supported

APIs

TextInput(value?: TextInputOptions)

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextInputOptions	No	Parameters of the TextInput component.

TextInputOptions

TextInput initialization parameters.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read-Only	Optional	Description
placeholder	ResourceStr	No	Yes	Text displayed when there is no input.
text	ResourceStr	No	Yes	Current text input. You are advised to bind the state variable to the text in real time through the onChange event, so as to prevent display errors when the component is updated. Since API version 10, this parameter supports two-way binding through $$. Since API version 18, this parameter supports two-way binding through !!.
controller⁸⁺	TextInputController	No	Yes	Text input controller.

Attributes

In addition to the universal attributes, the following attributes are supported.

NOTE
When no underline is set, the default value of the universal attribute padding is as follows:
{
top: '8vp',
right: '16vp',
bottom: '8vp',
left: '16vp'
}

When an underline is set, the default value of padding is as follows:
{
top: '12vp',
right: '0vp',
bottom: '12vp',
left: '0vp'
}

When padding is set to 0 for the text input box, you can set borderRadius to 0 to prevent the caret from being clipped. If the caret is displayed abnormally at the edge of the text box, check whether it is caused by the padding or borderRadius attribute.

Since API version 10, .width('auto') can be set for the TextInput component. Under this setting, the component auto-adapts its width to the text width, while respecting the constraintSize configuration and the maximum and minimum width restrictions received by the parent container. For details, see Sizing.

type

type(value: InputType)

Sets the text box type.

Different InputType values trigger corresponding keyboard types and enforce input restrictions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	InputType	Yes	Text box type. Default value: InputType.Normal

NOTE
The password filling service requires a specific input box type.

In the password mode, the decoration line decoration and underline showUnderline have no effect.

placeholderColor

placeholderColor(value: ResourceColor)

Sets the placeholder text color.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Placeholder text color. The default value follows the theme. Default value on wearables: '#99ffffff'

placeholderFont

placeholderFont(value?: Font)

Sets the placeholder text style, including the font size, font weight, font family, and font style.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Font	No	Placeholder text style. Default value on wearables: 18fp

NOTE

You can use loadFontSync to register custom fonts.

enterKeyType

enterKeyType(value: EnterKeyType)

Sets the type of the Enter key.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	EnterKeyType	Yes	Type of the Enter key. Default value: EnterKeyType.Done

caretColor

caretColor(value: ResourceColor)

Sets the color of the caret in the text box.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Color of the caret in the text box. Default value: '#007DFF'

NOTE
Since API version 12, this API can be used to set the text handle color, which is the same as the caret color.

maxLength

maxLength(value: number)

Sets the maximum number of characters for text input.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Maximum number of characters for text input. Default value: Infinity, indicating that there is no upper limit on the number of characters that can be entered NOTE If this attribute is not set or set to an invalid value, the default value is used. If a decimal value is provided, only its integer part is applied. If the value exceeds 2^31-1, exceptions may occur.

fontColor

fontColor(value: ResourceColor)

Sets the font color.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Font color. Default value on wearables: '#dbffffff'

Name	Type	Mandatory	Description
value	Length	Yes	Font size. If fontSize is of the number type, the unit fp is used. The default font size is 16 fp. The value cannot be a percentage. Default value on wearables: 18fp

fontStyle

fontStyle(value: FontStyle)

Sets the font style.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	FontStyle	Yes	Font style. Default value: FontStyle.Normal

fontWeight

fontWeight(value: number | FontWeight | ResourceStr)

Sets the font weight. If the value is too large, the text may be clipped depending on the font.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| FontWeight \| ResourceStr	Yes	Font weight. For the number type, the value range is [100, 900], at an interval of 100. The default value is 400. A larger value indicates a heavier font weight. For the string type, only strings that represent a number, for example, 400, and the following enumerated values of FontWeight are supported: bold, bolder, lighter, regular, and medium. Default value: FontWeight.Normal The Resource type is supported since API version 20.

fontFamily

fontFamily(value: ResourceStr)

Sets the font family.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceStr	Yes	Font family. Default font: 'HarmonyOS Sans' To specify multiple fonts, separate them with commas (,), and fonts are applied in priority order. Example: 'Arial, HarmonyOS Sans'. The 'HarmonyOS Sans' font and custom fonts are supported for applications. Only the 'HarmonyOS Sans' font is supported for widgets.

NOTE

You are advised to use loadFontSync to register custom fonts.

inputFilter⁸⁺

inputFilter(value: ResourceStr, error?: Callback<string>)

Sets the regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out.

For single-character input scenarios, only single-character matching is supported; for multi-character input scenarios (such as pasting), string matching is supported.

Since API version 11, setting inputFilter with a non-empty string invalidates the text filtering effect attached to the type API.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceStr	Yes	Regular expression.
error	Callback<string>	No	Filtered-out content to return when regular expression matching fails.

copyOption⁹⁺

copyOption(value: CopyOptions)

Sets whether the input text can be copied. If this attribute is set to CopyOptions.None, only paste and select all operations are supported.

If this attribute is set to CopyOptions.None, drag and drop operations are not supported.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	CopyOptions	Yes	Whether the input text can be copied. Default value: CopyOptions.LocalDevice

showPasswordIcon⁹⁺

showPasswordIcon(value: boolean)

Sets whether to display the password icon at the end of the password text box.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to display the password icon at the end of the password text box. true to display, false otherwise. Default value: false for TV devices; true for other devices

style⁹⁺

style(value: TextInputStyle | TextContentStyle)

Sets the text input style. The inline style only supports InputType.Normal.
For details about the text box types, see type.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextInputStyle \| TextContentStyle	Yes	Text input style. Default value: TextInputStyle.Default

textAlign⁹⁺

textAlign(value: TextAlign)

Sets the horizontal alignment of the text.

Available options are TextAlign.Start, TextAlign.Center, and TextAlign.End. TextAlign.JUSTIFY behaves the same as TextAlign.Start.

You can use the align attribute to control the vertical position of a text paragraph. In this component, the align attribute cannot be used to control the horizontal position of a text paragraph.

Alignment.TopStart, Alignment.Top, Alignment.TopEnd: Content aligns to the top.
Alignment.Start, Alignment.Center, Alignment.End: Content is centered vertically.
Alignment.BottomStart, Alignment.Bottom, Alignment.BottomEnd: Content aligns to the bottom.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextAlign	Yes	Horizontal alignment of the text. Default value: TextAlign.Start

NOTE

textAlign only adjusts the overall text layout and does not affect character display order. For character display order adjustment, see Bidirectional Text Layout and Alignment.

textDirection²³⁺

textDirection(direction: TextDirection | undefined)

Specifies the text layout direction. If this attribute is not set, the default text layout direction follows the component layout direction.

Atomic service API: This API can be used in atomic services since API version 23.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
direction	TextDirection \| undefined	Yes	Text layout direction. If this parameter is set to undefined, the text layout direction follows the component layout direction as defined by TextDirection.DEFAULT.

selectedBackgroundColor¹⁰⁺

selectedBackgroundColor(value: ResourceColor)

Sets the background color of the selected text. If the opacity is not set, a 20% opacity will be used.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Background color of the selected text.

caretStyle¹⁰⁺

caretStyle(value: CaretStyle)

Sets the caret style.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	CaretStyle	Yes	Caret style.

NOTE

When the color parameter is configured in both the caretColor and caretStyle attributes, the later-set value takes precedence.

Since API version 12, this API can be used to set the text handle color, which is the same as the caret color.

caretPosition¹⁰⁺

caretPosition(value: number)

Sets the caret position.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Caret position. The position before the first character is 0.

showUnit¹⁰⁺

showUnit(value: CustomBuilder)

Sets the unit displayed with the text box. This attribute effective only when showUnderline is set to true.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	CustomBuilder	Yes	Unit displayed with the text box.

showError¹⁰⁺

showError(value?: ResourceStr | undefined)

Sets the error message displayed when an error occurs.

If the data type is ResourceStr and the input content does not comply with specifications, the error message is displayed. If the error message does not fit in one line, an ellipsis is displayed to represent clipped text. If the data type is undefined, no error message is displayed. For details, see Example 2.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceStr \| undefined	No	Error message displayed when an error occurs. By default, no error message is displayed. On wearables, the font size is 13 fp and the alignment mode is center alignment. NOTE The Resource type is supported since API version 12.

showUnderline¹⁰⁺

showUnderline(value: boolean)

Sets whether to enable an underline.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to enable an underline. true to enable, false otherwise. Default value: false By default, the underline comes in the color of '#33182431', thickness of 1 px, and text box size of 48 vp. The underline is only available for the InputType.Normal type.

NOTE

In the password mode, the decoration line decoration and underline showUnderline have no effect.

passwordIcon¹⁰⁺

passwordIcon(value: PasswordIcon)

Sets the password icon to display at the end of the password text box.

Images in JPG, PNG, BMP, HEIC, and WEBP formats are supported.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	PasswordIcon	Yes	Password icon to display at the end of the password text box. By default, the system-provided icon is used. The icon size is fixed at 24 vp (or 28 vp on wearables), regardless of the source image size.

enableKeyboardOnFocus¹⁰⁺

enableKeyboardOnFocus(value: boolean)

Sets whether to pop up the soft keyboard when the TextInput component obtains focus in a way other than clicking.

Since API version 10, the TextInput component is bound to the input method by default when it obtains focus.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to pop up the soft keyboard when the TextInput component obtains focus in a way other than clicking. true: The soft keyboard pops up. false: The soft keyboard does not pop up. Default value: false for TV devices; true for other devices

selectionMenuHidden¹⁰⁺

selectionMenuHidden(value: boolean)

Sets whether to hide the system text selection menu.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to hide the system text selection menu. true: The system text selection menu is hidden when a user clicks the text box cursor, long-presses the text box, double-taps the text box, triple-taps the text box, or right-clicks the text box. false: The system text selection menu is displayed. Default value: false

barState¹⁰⁺

barState(value: BarState)

Sets the scrollbar display mode for the inline style in the editing state.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	BarState	Yes	Scrollbar display mode for the inline style in the editing state. Default value: BarState.Auto

maxLines¹⁰⁺

maxLines(value: number)

Sets the maximum number of lines that can be displayed with the inline style in the editing state.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Maximum number of lines that can be displayed with the inline style in the editing state. Default value: 3 Value range: (0, UINT32_MAX]

customKeyboard¹⁰⁺

customKeyboard(value: CustomBuilder | ComponentContent | undefined, options?: KeyboardOptions)

Sets a custom keyboard.

When a custom keyboard is set, activating the text box opens the specified custom component, instead of the system input method.

The custom keyboard's height can be set through the height attribute of the custom component's root node, and its width is fixed at the default value.

The custom keyboard is presented by overlaying the original screen, which is not compressed or lifted if avoid mode is not enabled or avoidance is not needed for the text box.

The custom keyboard cannot obtain the focus, but it blocks gesture events.

By default, the custom keyboard is closed when the input component loses the focus. You can also use the TextInputController.stopEditing API to close the keyboard.

When setting a custom keyboard, you can bind the onKeyPreIme event to prevent input from the physical keyboard.

From API version 23, the setCustomKeyboardContinueFeature API can be used to enable the continuation feature for custom keyboards. When switching between custom keyboards, the system changes the keyboard directly without triggering the close and open animations.

NOTE

This API cannot be called within attributeModifier.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	CustomBuilder \| ComponentContent²²⁺ \| undefined²²⁺	Yes	Custom keyboard. If the value is undefined, the custom keyboard is closed.
options¹²⁺	KeyboardOptions	No	Whether to support keyboard avoidance.

enableAutoFill¹¹⁺

enableAutoFill(value: boolean)

Sets whether to enable autofill.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to enable autofill. true to enable; false otherwise. Default value: true

enableSelectedDataDetector²²⁺

enableSelectedDataDetector(enable: boolean | undefined)

Sets whether to enable entity recognition for selected text. This API only works on devices that provide text recognition.

When enableSelectedDataDetector is set to true, all entity types are recognized by default.

This feature is only effective when CopyOptions is set to CopyOptions.LocalDevice or CopyOptions.CrossDevice.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enable	boolean \| undefined	Yes	Whether to enable entity recognition for selected text. true: Entity recognition is enabled. false: Entity recognition is disabled. Default value: true

passwordRules¹¹⁺

passwordRules(value: string)

Defines the rules for generating passwords. When autofill is used, these rules are transparently transmitted to Password Vault for generating a new password.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	string	Yes	Rules for generating passwords.

cancelButton¹¹⁺

cancelButton(options: CancelButtonOptions)

Sets the style of the cancel button on the right. Only icons of the image type are supported. The inline style is not supported. For details, see Example 4 Customizing the Cancel Button Style on the Right.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	CancelButtonOptions	Yes	Options of the cancel button on the right. Default value: { style: CancelButtonStyle.INPUT } Default value on wearables: 28vp

selectAll¹¹⁺

selectAll(value: boolean)

Sets whether to select all text in the initial state. The inline style is not supported.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to select all text in the initial state. true: Selecting all text is enabled. false: Selecting all text is disabled. Default value: false

showCounter¹¹⁺

showCounter(value: boolean, options?: InputCounterOptions)

Sets the character counter displayed when the number of characters entered exceeds the threshold. If the showCounter API is not called, the character counter is not displayed by default.

options can be set only when value is set to true, in which case a character counter is displayed below the text box. This attribute must be used together with maxLength. The character counter is displayed in this format: Number of characters entered/Character limit.

It is visible when the number of characters entered is greater than the character limit multiplied by the threshold percentage value. If options is not set, the text box border and character counter subscript turn red when the number of characters entered exceeds the limit. If value is set to true and InputCounterOptions is set, the text box border and character counter subscript turn red and the text box shakes when the number of characters entered reaches the limit, provided that the value of thresholdPercentage is valid. If highlightBorder is set to false, the text box border does not turn red. By default, highlightBorder is set to true.

The character counter is not displayed in the inline style and password mode.

Example 5: Setting a Character Counter shows the effect of setting showCounter.

NOTE

This API can be called within attributeModifier since API version 12.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to display the character counter. true: Character counter is displayed. false: Character counter is not displayed.
options	InputCounterOptions	No	Configuration options for the character counter.

contentType¹²⁺

contentType(value: ContentType)

Sets the content type for autofill.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ContentType	Yes	Content type for autofill.

underlineColor¹²⁺

underlineColor(value: ResourceColor|UnderlineColor|undefined)

Color of the underline.

When showUnderline is enabled, the underline color can be configured.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor \| UnderlineColor \| undefined	Yes	Color of the underline. The underline color changes with the underline mode. If the underline color is only set for the normal state, you can directly enter a value of the ResourceColor type. If the value specified is undefined, null, or invalid, all underlines are restored to the default value. Default value: underline color configured for the theme. The default underline color in the theme is '#33182431'.

lineHeight¹²⁺

lineHeight(value: number | string | Resource)

Sets the text line height.

If the value is less than or equal to 0, the line height is unrestricted and adapts to the font size. When the value is a number, the unit is fp. For the string type, numeric string values with optional units, for example, "10" or "10fp", are supported.

NOTE

If certain characters have significantly taller glyphs than others in the same line, layout anomalies such as clipping, overlapping, or misalignment may occur. In this case, adjust component attributes such as height and line height to ensure proper layout rendering.

When the password mode is set, lineHeight set by this API does not take effect.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Text line height.

decoration¹²⁺

decoration(value: TextDecorationOptions)

Sets the color, type, and style of the text decorative line.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextDecorationOptions	Yes	Text decorative line options. Default value: { type: TextDecorationType.None, color: Color.Black, style: TextDecorationStyle.SOLID, thicknessScale: 1.0 }

NOTE

When the bottom contour of a character intersects with the decoration, underline avoidance is triggered, commonly affecting characters like "g", "j", "y", "q", and "p".

If the decoration color is set to Color.Transparent, it inherits the text color of the first character in each line. If the decoration color is set to "#00FFFFFF", the line becomes fully transparent.

In the password mode, the decoration line decoration and underline showUnderline have no effect.

letterSpacing¹²⁺

letterSpacing(value: number | string | Resource)

Sets the letter spacing for a text style. If the value specified is a percentage or 0, the default value is used. For the string type, numeric string values with optional units, for example, "10" or "10fp", are supported.

If the value specified is a negative value, the text is compressed. A negative value too small may result in the text being compressed to 0 and no content being displayed.

This setting applies to every character, including those at line endings.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Letter spacing. Unit: fp

fontFeature¹²⁺

fontFeature(value: string)

Sets the font feature, for example, monospaced digits.

Format: normal | <feature-tag-value>

Format of <feature-tag-value>: <string> [ <integer> | on | off ]

There can be multiple <feature-tag-value> values, which are separated by commas (,).

For example, the input format for monospaced clock fonts is "ss01" on.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	string	Yes	Font feature.

For details about the supported font features, see the font feature list.

Font features are advanced typographic features, such as ligatures and monospace, for OpenType fonts. They are typically used in custom fonts and require the support of the font itself.

For more information about the font features, see Low-level font feature settings control: the font-feature-settings property and The Complete CSS Demo for OpenType Features.

NOTE

When the password mode is set, the fontFeature attribute cannot be used to set the text style.

wordBreak¹²⁺

wordBreak(value: WordBreak)

Sets the word break rule. This attribute takes effect when the inline style is set for the component, but has no effect on placeholder text.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	WordBreak	Yes	Word break rule in the inline style. Default value: WordBreak.BREAK_WORD

NOTE

The component does not support the clip attribute. Therefore, setting this attribute does not affect text clipping.

textOverflow¹²⁺

textOverflow(value: TextOverflow)

Sets the display mode for overflowing text. This attribute is supported only in the editing and non-editing states of the inline style.

Chinese text is truncated by character. English text is truncated by word. To truncate English text by letter, set wordBreak to WordBreak.BREAK_ALL.

When overflow is set to TextOverflow.None, the effect is the same as TextOverflow.Clip.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextOverflow	Yes	Display mode of overflowing text. Default value for the inline style in the non-editing state: TextOverflow.Ellipsis Default value for the inline style in the editing state: TextOverflow.Clip

NOTE The TextInput component does not support the TextOverflow.MARQUEE mode. When the TextOverflow.MARQUEE mode is set, the TextOverflow.Ellipsis mode is used for the non-editing state of the inline style, and TextOverflow.Clip mode is used for the editing state of the inline style as well as for the non-inline mode.

If inline mode is not set, the text displays in the default style, and any textOverflow setting will not take effect.

textIndent¹²⁺

textIndent(value: Dimension)

Sets the indent of the first line text.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Dimension	Yes	Indent of the first line text. Default value: 0

minFontSize¹²⁺

minFontSize(value: number | string | Resource)

Sets the minimum font size. For the string type, numeric string values with optional units, for example, "10" or "10fp", are supported.

This attribute takes effect only when used together with maxFontSize and maxLines (for the editing state of the inline style), or layout constraint settings.

When the adaptive font size is used, the fontSize settings do not take effect.

If the value of minFontSize is less than or equal to 0, the adaptive font sizing feature is disabled. In such cases, the fontSize attribute is used instead. If fontSize is not set, the default value will apply.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Minimum font size. Unit: fp

maxFontSize¹²⁺

maxFontSize(value: number | string | Resource)

Sets the maximum font size. For the string type, numeric string values with optional units, for example, "10" or "10fp", are supported.

This attribute takes effect only when used together with minFontSize and maxLines (for the editing state of the inline style), or layout constraint settings.

When the adaptive font size is used, the fontSize settings do not take effect.

If the value of maxFontSize is less than or equal to 0 or is less than the value of minFontSize, the adaptive font sizing feature is disabled. In such cases, the fontSize attribute is used instead. If fontSize is not set, the default value will apply.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Maximum font size. Unit: fp

heightAdaptivePolicy¹²⁺

heightAdaptivePolicy(value: TextHeightAdaptivePolicy)

Sets how the adaptive height is determined for the text in the inline style.

When this attribute is set to TextHeightAdaptivePolicy.MAX_LINES_FIRST, the maxLines attribute takes precedence for adjusting the text height. If the maxLines setting results in a layout beyond the layout constraints, the text will shrink to a font size between minFontSize and maxFontSize to allow for more content to be shown.

If this attribute is set to TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, the minFontSize attribute takes precedence for adjusting the text height. If the text can fit in one line with the minFontSize setting, the text will enlarge to the maximum available font size between minFontSize and maxFontSize.

TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST produces the same effect as TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST.

When the component is in the non-inline style, the three values of TextHeightAdaptivePolicy have the same effect, that is, the text will shrink to a font size between minFontSize and maxFontSize to allow for more content to be shown.

NOTE

If the text box is in the inline style, the font size in the editing state is different from that in the non-editing state.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TextHeightAdaptivePolicy	Yes	How the adaptive height is determined for the text. Default value: TextHeightAdaptivePolicy.MAX_LINES_FIRST

showPassword¹²⁺

showPassword(visible: boolean)

Sets whether to show the password.

This API has effect only when the input type is set to Password, NEWPASSWORD, or NUMBERPASSWORD mode. It does not work in other modes.

In the password mode, inconsistencies between the backend state of the text box and the frontend application's state management variables may cause abnormal behavior of the trailing icon. To avoid such issues, use the onSecurityStateChange callback to sync the states. For details, see Example 1: Setting and Obtaining the Caret Position.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
visible	boolean	Yes	Whether to show the password. true: The password is shown. false: The password is not shown. Default value: false

lineBreakStrategy¹²⁺

lineBreakStrategy(strategy: LineBreakStrategy)

Sets the line break rule. This attribute takes effect when wordBreak is not set to breakAll. Hyphens are not supported.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
strategy	LineBreakStrategy	Yes	Line break rule. Default value: LineBreakStrategy.GREEDY NOTE This attribute takes effect only when the inline style is set.

editMenuOptions¹²⁺

editMenuOptions(editMenu: EditMenuOptions)

Sets the extended options of the custom menu, including the text content, icon, and callback.

When disableMenuItems or disableSystemServiceMenuItems is used to disable system service menu items in the text selection menu, the disabled menu options will be excluded from the parameter list in the onCreateMenu callback of editMenuOptions.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
editMenu	EditMenuOptions	Yes	Extended options of the custom menu.

enablePreviewText¹²⁺

enablePreviewText(enable: boolean)

Sets whether to enable preview text.

The preview content is defined as a temporary, uncommitted input state. Currently, the text interception function is not supported.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enable	boolean	Yes	Whether to enable preview text. true: Preview text is enabled. false: Preview text is disabled. Default value: true

NOTE

Preview text represents a temporary, uncommitted input state. This feature requires support from the input method with pre-commit text functionality enabled. During text entry, when candidate words have not been confirmed yet, the text box displays marked text in a provisional state. For example, when users enter Chinese using Pinyin input, the Pinyin letters appear in the input box before a word is selected from the candidate word list. This intermediate state constitutes preview text.

enableHapticFeedback¹³⁺

enableHapticFeedback(isEnabled: boolean)

Sets whether to enable haptic feedback.

To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under requestPermissions in the module.json5 file of the project.

"requestPermissions": [
 {
    "name": "ohos.permission.VIBRATE",
 }
]

Atomic service API: This API can be used in atomic services since API version 13.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isEnabled	boolean	Yes	Whether to enable haptic feedback. true: Haptic feedback is enabled. false: Haptic feedback is disabled. Default value: true

autoCapitalizationMode²⁰⁺

autoCapitalizationMode(mode: AutoCapitalizationMode)

Sets the auto-capitalization text mode. This API provides the capability, but actual implementation depends on the input method application.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
mode	AutoCapitalizationMode	Yes	Auto-capitalization mode. The default state is inactive.

keyboardAppearance¹⁵⁺

keyboardAppearance(appearance: Optional<KeyboardAppearance>)

Sets the keyboard appearance for the text box. This setting takes effect only after input method adaptation. For details, see Immersive Mode of the Input Method Application.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
appearance	Optional<KeyboardAppearance>	Yes	Appearance of the keyboard. Default value: KeyboardAppearance.NONE_IMMERSIVE

strokeWidth²⁰⁺

strokeWidth(width: Optional<LengthMetrics>)

Sets the text stroke width.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
width	Optional<LengthMetrics>	Yes	Text stroke width. When the unit of LengthMetrics is px: Values < 0: solid text. Values > 0: outlined text. Default value: 0 (no stroke)

strokeColor²⁰⁺

strokeColor(color: Optional<ResourceColor>)

Sets the text stroke color.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
color	Optional<ResourceColor>	Yes	Stroke color. Default value: font color. Invalid values are treated as the default value.

stopBackPress¹⁵⁺

stopBackPress(isStopped: Optional<boolean>)

Sets whether to prevent the back key event from being propagated.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isStopped	Optional<boolean>	Yes	Whether to prevent the back button press from being propagated to other components or applications. true: Propagation is prevented. false: Propagation is allowed. Default value: true Invalid values are treated as the default value.

halfLeading¹⁸⁺

halfLeading(halfLeading: Optional<boolean>)

Enables half leading for text, which splits the leading equally between the top and bottom of the line.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
halfLeading	Optional<boolean>	Yes	Whether half leading is enabled. Half leading refers to splitting the leading in half and applying it equally to the top and bottom of the line. true: Half leading is enabled. false: Half leading is not enabled. Default value: false

minFontScale¹⁸⁺

minFontScale(scale: Optional<number | Resource>)

Sets the minimum font scale factor for text.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
scale	Optional<number \| Resource>	Yes	Minimum font scale factor for text. The undefined type is supported. Value range: [0, 1] NOTE A value less than 0 is handled as 0. A value greater than 1 is handled as 1. Invalid values are not applied by default. Before use, you need to configure the configuration.json and app.json5 files in the project. For details, see Example 18: Setting the Minimum and Maximum Font Scale Factors.

maxFontScale¹⁸⁺

maxFontScale(scale: Optional<number | Resource>)

Sets the maximum font scale factor for text.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
scale	Optional<number \| Resource>	Yes	Maximum font scale factor for text. The undefined type is supported. Value range: [1, +∞) NOTE Values less than 1 are treated as 1. Invalid values are not applied by default. After the maxFontScale attribute is set, the error message set by showError can be enlarged to a maximum of twice the original size. Before use, you need to configure the configuration.json and app.json5 files in the project. For details, see Example 18: Setting the Minimum and Maximum Font Scale Factors.

cancelButton¹⁸⁺

cancelButton(symbolOptions: CancelButtonSymbolOptions)

Sets the style of the cancel button on the right. Only symbol-type icons are supported. The inline style is not supported. For details, see Example 15: Setting a Symbol-Type Cancel Button.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
symbolOptions	CancelButtonSymbolOptions	Yes	Style of the cancel button on the right. Default value: { style: CancelButtonStyle.INPUT }

ellipsisMode¹⁸⁺

ellipsisMode(mode: Optional<EllipsisMode>)

Sets the ellipsis position. The ellipsisMode attribute takes effect only in the inline style. It must be used together with overflow set to TextOverflow.Ellipsis. The ellipsisMode attribute does not take effect if set alone.

This attribute works normally in the non-editing state. In the editing state, EllipsisMode.START and EllipsisMode.CENTER take effect only when maxLines is set to 1, while EllipsisMode.END, EllipsisMode.MULTILINE_START, and EllipsisMode.MULTILINE_CENTER take effect normally.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
mode	Optional<EllipsisMode>	Yes	Ellipsis position. Default value: EllipsisMode.END

enableAutoFillAnimation²⁰⁺

enableAutoFillAnimation(enabled: Optional<boolean>)

Sets whether to enable the autofill animation.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	Optional<boolean>	Yes	Whether to enable the autofill animation. true to enable; false otherwise. Default value: true NOTE When enabled, the animation takes effect only for text boxes where InputType is set to Password, NEW_PASSWORD, or NUMBER_PASSWORD.

enableAutoSpacing²⁰⁺

enableAutoSpacing(enabled: Optional<boolean>)

Sets whether to enable automatic spacing between Chinese and Western characters.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	Optional<boolean>	Yes	Whether to enable automatic spacing between Chinese and Western characters. true to enable, false otherwise. Default value: false

compressLeadingPunctuation²³⁺

compressLeadingPunctuation(enabled: Optional<boolean>)

Sets whether to enable leading punctuation compression.

NOTE

Leading punctuation is not compressed by default.

For the range of punctuation marks that support leading compression, see ParagraphStyle.

Atomic service API: This API can be used in atomic services since API version 23.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	Optional<boolean>	Yes	Whether to enable leading punctuation compression. true: Leading punctuation compression is enabled. false: Leading punctuation compression is disabled.

orphanCharOptimization

orphanCharOptimization(enabled: Optional<boolean>)

Sets whether to enable orphan character optimization during text typesetting. If this attribute is not set, orphan character optimization is disabled by default.

Orphan character optimization improves the text layout by handling the orphan character (the first Chinese character of the last line of a paragraph) more efficiently. When enabled, it adjusts line breaks to avoid orphan characters as much as possible. This feature takes effect only when wordBreak is not BREAK_ALL and locale of the first TextStyle of the text to be typeset is either "zh-Hans" or "zh-Hant".

Since: 26.0.0

Atomic service API: This API can be used in atomic services since API version 26.0.0.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	Optional<boolean>	Yes	Whether to enable orphan character optimization for the last line of the paragraph. true: Orphan character optimization is enabled. false: Orphan character optimization is disabled. When the value is undefined or null, orphan character optimization is disabled.

includeFontPadding²³⁺

includeFontPadding(include: Optional<boolean>)

Sets whether to add spacing to the first and last lines to avoid text truncation. If this attribute is not set, no spacing is added by default.

Atomic service API: This API can be used in atomic services since API version 23.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
include	Optional<boolean>	Yes	Whether to add spacing to the first and last lines to avoid text truncation. true: Spacing is added to the first and last lines. false: Spacing is not added to the first and last lines.

fallbackLineSpacing²³⁺

fallbackLineSpacing(enabled: Optional<boolean>)

Adapts the line height to the actual text height for overlapped multi-line text. This API takes effect only when the line height is less than the actual text height. If this API is not set, the line height does not adapt to the actual text height by default.

Atomic service API: This API can be used in atomic services since API version 23.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	Optional<boolean>	Yes	Whether the line height adapts to the actual text height. true: Line height adapts to the actual text height. false: Line height does not adapt to the actual text height.

selectedDragPreviewStyle²³⁺

selectedDragPreviewStyle(value: SelectedDragPreviewStyle | undefined)

Sets the drag preview style for text being dragged in the text box.

Atomic service API: This API can be used in atomic services since API version 23.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	SelectedDragPreviewStyle \| undefined	Yes	Drag preview style for text being dragged in the text box. If this parameter is set to undefined, the drag preview follows the theme: white in light mode and black in dark mode.

InputType

Sets the single-line text box type.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
Normal	0	Normal input mode. In this mode, there is no special restriction on the input characters. The inline style supports only the InputType.Normal type. Atomic service API: This API can be used in atomic services since API version 11.
Number	2	Digit input mode. Negative numbers and decimals are not supported. Atomic service API: This API can be used in atomic services since API version 11.
PhoneNumber⁹⁺	3	Phone number input mode. In this mode, the following characters are allowed: digits, spaces, plus signs (+), hyphens (-), asterisks (), and number signs (#), opening parentheses ((), and closing parenthesis ()); the length is not limited. Atomic service API*: This API can be used in atomic services since API version 11.
Email	5	Email address input mode. This mode accepts only digits, letters, underscores (_), dots (.), and the following special characters: ! # $ % & ' " * + - / = ? ^ ` { \| } ~ @. The at sign can appear only once. Atomic service API: This API can be used in atomic services since API version 11.
Password	7	Password input mode. The entered text is briefly displayed before turning to dots by default. Since API version 12, the entered text is directly displayed as dots on PCs and 2-in-1 devices. The eye icon at the end of the input box is hidden by default on TV devices, and shown by default on other devices. The decoration, showUnderline, and lineHeight attributes do not take effect in password input mode. If Password Vault is enabled, autofill is available for the username and password. Atomic service API: This API can be used in atomic services since API version 11.
NUMBER_PASSWORD¹¹⁺	8	Numeric password input mode. The entered text is briefly displayed before turning to dots by default. Since API version 12, the entered text is directly displayed as dots on PCs and 2-in-1 devices. The eye icon at the end of the input box is hidden by default on TV devices, and shown by default on other devices. The password input mode does not support underlines. If Password Vault is enabled, autofill is available for the username and password. Atomic service API: This API can be used in atomic services since API version 12.
USER_NAME¹¹⁺	10	User name input mode with no special restrictions. If Password Vault is enabled, autofill is available for the username and password. Atomic service API: This API can be used in atomic services since API version 12.
NEW_PASSWORD¹¹⁺	11	New password input mode with no special restrictions. The entered text is briefly displayed before turning to dots by default. Since API version 12, the entered text is directly displayed as dots on PCs and 2-in-1 devices. The eye icon at the end of the input box is hidden by default on TV devices, and shown by default on other devices. If Password Vault is enabled, a new password can be automatically generated. Atomic service API: This API can be used in atomic services since API version 12.
NUMBER_DECIMAL¹¹⁺	12	Number input mode with a decimal point. The value can contain digits and only one decimal point. Negative decimals are not supported. For the input mode of negative decimals, use inputFilter. Atomic service API: This API can be used in atomic services since API version 11.
URL¹²⁺	13	URL input mode with no special restrictions. Atomic service API: This API can be used in atomic services since API version 12.
ONE_TIME_CODE²⁰⁺	14	One-time code (verification code) input mode with no special restrictions. Atomic service API: This API can be used in atomic services since API version 20.

ContentType¹²⁺

Enumerates the content types for autofill.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
USER_NAME	0	Username. Password Vault, when enabled, can automatically save and fill in usernames. Atomic service API: This API can be used in atomic services since API version 12.
PASSWORD	1	Password. Password Vault, when enabled, can automatically save and fill in passwords. Atomic service API: This API can be used in atomic services since API version 12.
NEW_PASSWORD	2	New password. Password Vault, when enabled, can automatically generate a new password. Atomic service API: This API can be used in atomic services since API version 12.
FULL_STREET_ADDRESS	3	Full street address. The scenario-based autofill feature, when enabled, can automatically save and fill in full street addresses. Atomic service API: This API can be used in atomic services since API version 12.
HOUSE_NUMBER	4	House number. The scenario-based autofill feature, when enabled, can automatically save and fill in house numbers. Atomic service API: This API can be used in atomic services since API version 12.
DISTRICT_ADDRESS	5	District and county. The scenario-based autofill feature, when enabled, can automatically save and fill in districts and counties. Atomic service API: This API can be used in atomic services since API version 12.
CITY_ADDRESS	6	City. The scenario-based autofill feature, when enabled, can automatically save and fill in cities. Atomic service API: This API can be used in atomic services since API version 12.
PROVINCE_ADDRESS	7	Province. The scenario-based autofill feature, when enabled, can automatically save and fill in provinces. Atomic service API: This API can be used in atomic services since API version 12.
COUNTRY_ADDRESS	8	Country. The scenario-based autofill feature, when enabled, can automatically save and fill in countries. Atomic service API: This API can be used in atomic services since API version 12.
PERSON_FULL_NAME	9	Full name. The scenario-based autofill feature, when enabled, can automatically save and fill in full names. Atomic service API: This API can be used in atomic services since API version 12.
PERSON_LAST_NAME	10	Last name. The scenario-based autofill feature, when enabled, can automatically save and fill in last names. Atomic service API: This API can be used in atomic services since API version 12.
PERSON_FIRST_NAME	11	First name. The scenario-based autofill feature, when enabled, can automatically save and fill in first names. Atomic service API: This API can be used in atomic services since API version 12.
PHONE_NUMBER	12	Phone number. The scenario-based autofill feature, when enabled, can automatically save and fill in phone numbers. Atomic service API: This API can be used in atomic services since API version 12.
PHONE_COUNTRY_CODE	13	Country code. The scenario-based autofill feature, when enabled, can automatically save and fill in country codes. Atomic service API: This API can be used in atomic services since API version 12.
FULL_PHONE_NUMBER	14	Phone number with country code. The scenario-based autofill feature, when enabled, can automatically save and fill in phone numbers with country codes. Atomic service API: This API can be used in atomic services since API version 12.
EMAIL_ADDRESS	15	Email address. The scenario-based autofill feature, when enabled, can automatically save and fill in email addresses. Atomic service API: This API can be used in atomic services since API version 12.
BANK_CARD_NUMBER	16	Bank card number. The scenario-based autofill feature, when enabled, can automatically save and fill in bank card numbers. Atomic service API: This API can be used in atomic services since API version 12.
ID_CARD_NUMBER	17	ID card number. The scenario-based autofill feature, when enabled, can automatically save and fill in ID card numbers. Atomic service API: This API can be used in atomic services since API version 12.
NICKNAME	23	Nickname. The scenario-based autofill feature, when enabled, can automatically save and fill in nicknames. Atomic service API: This API can be used in atomic services since API version 12.
DETAIL_INFO_WITHOUT_STREET	24	Address information without street address. The scenario-based autofill feature, when enabled, can automatically save and fill in address information without street addresses. Atomic service API: This API can be used in atomic services since API version 12.
FORMAT_ADDRESS	25	Standard address. The scenario-based autofill feature, when enabled, can automatically save and fill in standard addresses. Atomic service API: This API can be used in atomic services since API version 12.
PASSPORT_NUMBER¹⁸⁺	26	Passport number. The scenario-based autofill feature, when enabled, can automatically save and fill in passport numbers. Atomic service API: This API can be used in atomic services since API version 18.
VALIDITY¹⁸⁺	27	Passport validity period. The scenario-based autofill feature, when enabled, can automatically save and fill in passport validity periods. Atomic service API: This API can be used in atomic services since API version 18.
ISSUE_AT¹⁸⁺	28	Passport place of issue. The scenario-based autofill feature, when enabled, can automatically save and fill in the place of issue for passports. Atomic service API: This API can be used in atomic services since API version 18.
ORGANIZATION¹⁸⁺	29	Invoice title. The scenario-based autofill feature, when enabled, can automatically save and fill in invoice titles. Atomic service API: This API can be used in atomic services since API version 18.
TAX_ID¹⁸⁺	30	Tax ID. The scenario-based autofill feature, when enabled, can automatically save and fill in tax IDs. Atomic service API: This API can be used in atomic services since API version 18.
ADDRESS_CITY_AND_STATE¹⁸⁺	31	Location. The scenario-based autofill feature, when enabled, can automatically save and fill in locations. Atomic service API: This API can be used in atomic services since API version 18.
FLIGHT_NUMBER¹⁸⁺	32	Flight number. Currently not supported for automatic saving and auto-filling. Atomic service API: This API can be used in atomic services since API version 18.
LICENSE_NUMBER¹⁸⁺	33	Driver's license number. Currently not supported for automatic saving and auto-filling. Atomic service API: This API can be used in atomic services since API version 18.
LICENSE_FILE_NUMBER¹⁸⁺	34	Driver's license file number. Currently not supported for automatic saving and auto-filling. Atomic service API: This API can be used in atomic services since API version 18.
LICENSE_PLATE¹⁸⁺	35	License plate number. The scenario-based autofill feature, when enabled, can automatically save and fill in license plate numbers. Atomic service API: This API can be used in atomic services since API version 18.
ENGINE_NUMBER¹⁸⁺	36	Vehicle registration engine number. Currently not supported for automatic saving and auto-filling. Atomic service API: This API can be used in atomic services since API version 18.
LICENSE_CHASSIS_NUMBER¹⁸⁺	37	Chassis number. Currently not supported for automatic saving and auto-filling. Atomic service API: This API can be used in atomic services since API version 18.

TextInputStyle⁹⁺

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Description
Default	Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.
Inline	Inline style. The background height of the selected text is the same as the height of the text box. This style is used in scenarios where editing and non-editing states are obvious, for example, renaming in the file list view. The showError attribute is not supported for this style. In the inline style, text cannot be dragged into the text box.

PasswordIcon¹⁰⁺

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read-Only	Optional	Description
onIconSrc	string \| Resource	No	Yes	Displays the icon when the password is toggled to visible in the password input mode. The string type can be used to load network images and local images.
offIconSrc	string \| Resource	No	Yes	Displays the icon when the password is toggled to hidden in the password input mode. The string type can be used to load network images and local images.

EnterKeyType

Type of the Enter key.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
Go	2	The Enter key is labeled "Go." Atomic service API: This API can be used in atomic services since API version 11.
Search	3	The Enter key is labeled "Search." Atomic service API: This API can be used in atomic services since API version 11.
Send	4	The Enter key is labeled "Send." Atomic service API: This API can be used in atomic services since API version 11.
Next	5	The Enter key is labeled "Next." Atomic service API: This API can be used in atomic services since API version 11.
Done	6	The Enter key is labeled "Done." Atomic service API: This API can be used in atomic services since API version 11.
PREVIOUS¹¹⁺	7	The Enter key is labeled "Previous." Atomic service API: This API can be used in atomic services since API version 12.
NEW_LINE¹¹⁺	8	The Enter key is labeled "New Line." Atomic service API: This API can be used in atomic services since API version 12.

Events

In addition to the universal events, the following events are supported.

onChange

onChange(callback: EditableTextOnChangeCallback)

Triggered when the input in the text box changes.

In this callback, if caret operations are performed, you must adjust the caret logic based on the previewText parameter to ensure it works seamlessly within the preview display scenario.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	EditableTextOnChangeCallback	Yes	Callback invoked when the input in the text box changes.

onSubmit

onSubmit(callback: OnSubmitCallback)

Triggered when the Enter key on the keyboard is pressed for submission.

On non-TV devices, the input box loses focus and the keyboard is dismissed by default when the Enter key is pressed. You can configure whether to dismiss the keyboard in OnSubmitCallback. For details, see Example 2: Setting Underlines.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	OnSubmitCallback	Yes	Callback for submission.

onEditChanged^(deprecated)

onEditChanged(callback: (isEditing: boolean) => void)

Triggered when the input status changes.

NOTE

This API is supported since API version 7 and deprecated since API version 8. You are advised to use onEditChange instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isEditing	boolean	Yes	Whether the input is in progress. true: Input is in progress. false: No input is in progress.

onEditChange⁸⁺

onEditChange(callback: Callback<boolean>)

Triggered when the input status changes. The text box is in the editing state when it has the caret placed in it, and is in the non-editing state otherwise.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<boolean>	Yes	Callback for the input status change. Returns true if the input box is in the editing state; returns false if the input box is in the non-editing state.

onCopy⁸⁺

onCopy(callback: Callback<string>)

Triggered when a copy operation is performed.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<string>	Yes	Callback used to return the copied text content.

onWillCopy

onWillCopy(callback: Callback<string, boolean>)

Triggered before the copy operation is performed.

Since: 26.0.0

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 26.0.0.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<string, boolean>	Yes	Callback invoked before the copy operation. If the callback is the string type, the value indicates the text content to be copied. If the callback is the boolean type, the value indicates whether the selected text is allowed to be copied. true: yes. false: no.

onCut⁸⁺

onCut(callback: Callback<string>)

Triggered when a cut operation is performed.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<string>	Yes	Callback used to return the cut text content.

onWillCut

onWillCut(callback: Callback<string, boolean>)

Triggered before the cut operation is performed.

Since: 26.0.0

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 26.0.0.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<string, boolean>	Yes	Callback invoked before the cut operation. If the callback is the string type, the value indicates the text content to be cut. If the callback is the boolean type, the value indicates whether the selected text is allowed to be cut. true: yes. false: no.

onPaste⁸⁺

onPaste(callback: OnPasteCallback)

Triggered when a paste operation is performed.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	OnPasteCallback	Yes	Callback used to return the pasted text content.

onTextSelectionChange¹⁰⁺

onTextSelectionChange(callback: OnTextSelectionChangeCallback)

Triggered when the text selection changes or the caret position changes during editing.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	OnTextSelectionChangeCallback	Yes	Callback for text selection changes or caret position changes.

onContentScroll¹⁰⁺

onContentScroll(callback: OnContentScrollCallback)

Triggered when the text content is scrolled.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	OnContentScrollCallback	Yes	Callback for text content scrolling.

onSecurityStateChange¹²⁺

onSecurityStateChange(callback: Callback<boolean>)

Triggered when the password visibility state is toggled.

NOTE

This API can be called in attributeModifier since API version 20.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<boolean>	Yes	Callback used to return the result. Returns true if the state is toggled; returns false otherwise.

onWillInsert¹²⁺

onWillInsert(callback: Callback<InsertValue, boolean>)

Triggered when text is about to be inserted.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<InsertValue, boolean>	Yes	Callback triggered when text is about to be inserted. It returns true if the text is inserted; returns false otherwise. This callback is not triggered for pre-edit or candidate word operations. It is available only for system input methods.

onDidInsert¹²⁺

onDidInsert(callback: Callback<InsertValue>)

Triggered when text is inserted.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<InsertValue>	Yes	Callback triggered when text is inserted. It is available only for system input methods.

onWillDelete¹²⁺

onWillDelete(callback: Callback<DeleteValue, boolean>)

Triggered when text is about to be deleted.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<DeleteValue, boolean>	Yes	Callback triggered when text is about to be deleted. It returns true if the text is deleted; returns false otherwise. This callback is not called for text preview. It is available only for system input methods.

onDidDelete¹²⁺

onDidDelete(callback: Callback<DeleteValue>)

Triggered when text is deleted.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<DeleteValue>	Yes	Callback triggered when text is deleted. It is available only for system input methods.

NOTE

Clicking the clear button does not trigger the onDidDelete callback.

onWillChange¹⁵⁺

onWillChange(callback: Callback<EditableTextChangeValue, boolean>)

Triggered when the text content is about to change.

This callback is triggered after onWillInsert and onWillDelete, but before onDidInsert and onDidDelete.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<EditableTextChangeValue, boolean>	Yes	Callback triggered when the text content is about to change. Returning true allows the change to proceed, while returning false cancels the change.

onWillAttachIME²⁰⁺

onWillAttachIME(callback: Callback<IMEClient>)

Called when the input box is about to be bound to an input method.

Before the input box is bound to an input method, you can use the setKeyboardAppearanceConfig API of UIContext to set the keyboard style.

From API version 22, the setExtraConfig method of IMEClient can be called to set input method extension information. After the input method is bound, it receives this extension information which can be used to implement custom functionality.

IMEClient is valid only during the execution of onWillAttachIME and cannot be called asynchronously.

NOTE

This API cannot be called within attributeModifier.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<IMEClient >	Yes	Callback invoked when the input box is about to be bound to an input method.

TextInputController⁸⁺

The controller for the TextInput component inherits from TextContentControllerBase. The APIs involved are as follows: system API getText and other APIs like getTextContentRect, getTextContentLineCount, getCaretOffset, addText, deleteText, getSelection, clearPreviewText, setStyledPlaceholder, and deleteBackward.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Objects to Import

controller: TextInputController = new TextInputController();

constructor⁸⁺

constructor()

A constructor used to create a TextInputController object.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

caretPosition⁸⁺

caretPosition(value: number): void

Sets the position of the caret. If the value is less than 0, the value 0 is used. If the value exceeds the text length, the caret is placed at the end of the text.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Length from the start of the string to the position where the caret is located.

setTextSelection¹⁰⁺

setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void

Sets the text selection area, which will be highlighted.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
selectionStart	number	Yes	Start position of the text selection range. The start position of text in the text box is 0.
selectionEnd	number	Yes	End position of the text selection range. If selectionEnd is less than 0, it is handled as 0. If selectionEnd exceeds the text length, it is clamped to the text length.
options¹²⁺	SelectionOptions	No	Configuration options for text selection. Default value: MenuPolicy.DEFAULT This parameter can be used in atomic services since API version 12.

NOTE

If selectionStart or selectionEnd is set to undefined, the value 0 will be used.

If selectionMenuHidden is set to true or a 2-in-1 device is used, calling setTextSelection does not display the text selection menu even when options is set to MenuPolicy.SHOW.

When an emoji is truncated by the text selection range, it will be selected if its start position lies within the range.

stopEditing¹⁰⁺

stopEditing(): void

Exits the editing state.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

UnderlineColor¹²⁺

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read-Only	Optional	Description
typing	ResourceColor \| undefined	No	Yes	Underline color in the typing state. If no value is specified or if the value specified is undefined, null, or invalid, the default value is used.
normal	ResourceColor \| undefined	No	Yes	Underline color in the normal state. If no value is specified or if the value specified is undefined, null, or invalid, the default value is used.
error	ResourceColor \| undefined	No	Yes	Underline color when an error occurs. If no value is specified or if the value specified is undefined, null, or invalid, the default value is used. This option changes the color used in the showCounter attribute when the maximum number of characters is reached.
disable	ResourceColor \| undefined	No	Yes	Underline color in the disabled state. If no value is specified or if the value specified is undefined, null, or invalid, the default value is used.

SubmitEvent¹¹⁺

Defines the user submission event.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Attributes

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read-Only	Optional	Description
text	string	No	No	Text in the text box.

keepEditableState¹¹⁺

keepEditableState(): void

Maintains the editable state of the text box when called.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

OnPasteCallback¹⁸⁺

type OnPasteCallback = (content: string, event: PasteEvent) => void

Defines the callback used to return the pasted text content.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
content	string	Yes	Text to be pasted.
event	PasteEvent	Yes	Custom paste event.

OnSubmitCallback¹⁸⁺

type OnSubmitCallback = (enterKey: EnterKeyType, event: SubmitEvent) => void

Defines the callback for submission.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enterKey	EnterKeyType	Yes	Type of the Enter key.
event	SubmitEvent	Yes	Submit event. It can be used to control whether to dismiss the keyboard.

OnTextSelectionChangeCallback¹⁸⁺

type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void

Defines the callback for text selection changes or caret position changes.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
selectionStart	number	Yes	Start position of the selected text. The start position of text is 0.
selectionEnd	number	Yes	End position of the selected text.

OnContentScrollCallback¹⁸⁺

type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void

Defines the callback for text content scrolling.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
totalOffsetX	number	Yes	Offset in the X coordinate of the text in the content area, in px.
totalOffsetY	number	Yes	Offset in the Y coordinate of the text in the content area, in px.

Example

Example 1: Setting and Obtaining the Caret Position

This example demonstrates how to set and obtain the caret position using controller, available since API version 8. You can use !! to implement two-way data binding for the text parameter, available since API version 18.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  // index: Index of the caret position.
  // x: X coordinate of the caret relative to the text box, in px.
  // y: Y coordinate of the caret relative to the text box, in px.
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }; 
  @State passwordState: boolean = false;
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text!!, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width('95%')
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.info(JSON.stringify(e));
        })
      Text(this.text)
      Button('Set caretPosition 1')
        .margin(15)
        .onClick(() => {
          // Move the caret to after the first entered character.
          this.controller.caretPosition(1);
        })
      Button('Get CaretOffset')
        .margin(15)
        .onClick(() => {
          // Obtain the position of the caret relative to the text box.
          this.positionInfo = this.controller.getCaretOffset();
        })
      // Password text box.
      TextInput({ placeholder: 'input your password...' })
        .width('95%')
        .height(40)
        .margin(20)
        .type(InputType.Password)
        .maxLength(9)
        .showPasswordIcon(true)
        .showPassword(this.passwordState)
        .onSecurityStateChange(((isShowPassword: boolean) => {
          // Update the password visibility.
          console.info('isShowPassword', isShowPassword);
          this.passwordState = isShowPassword;
        }))
      // Email address autofill.
      TextInput({ placeholder: 'input your email...' })
        .width('95%')
        .height(40)
        .margin(20)
        .contentType(ContentType.EMAIL_ADDRESS)
        .maxLength(9)
      // Inline-style text box.
      TextInput({ text: 'inline style' })
        .width('95%')
        .height(50)
        .margin(20)
        .borderRadius(0)
        .style(TextInputStyle.Inline)
    }.width('100%')
  }
}

TextInput

Example 2: Setting Underlines

This example demonstrates the display effects of underlines in different scenarios through showUnderline, showError, showUnit, and passwordIcon attributes, available since API version 10. The underlineColor attribute (available since API version 12) can be used to configure the underline color.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  // Replace $r('app.media.ImageOne') with the image resource file you use.
  @State passWordSrc1: Resource = $r('app.media.ImageOne'); 
  // Replace $r('app.media.ImageTwo') with the image resource file you use.
  @State passWordSrc2: Resource = $r('app.media.ImageTwo'); 
  @State textError: string = '';
  @State text: string = '';
  @State nameText: string = 'test';

  @Builder
  itemEnd() {
    Select([{ value: 'KB' },
      { value: 'MB' },
      { value: 'GB' },
      { value: 'TB', }])
      .height("48vp")
      .borderRadius(0)
      .selected(2)
      .align(Alignment.Center)
      .value('MB')
      .font({ size: 20, weight: 500 })
      .fontColor('#182431')
      .selectedOptionFont({ size: 20, weight: 400 })
      .optionFont({ size: 20, weight: 400 })
      .backgroundColor(Color.Transparent)
      .responseRegion({
        height: "40vp",
        width: "80%",
        x: '10%',
        y: '6vp'
      })
      .onSelect((index: number) => {
        console.info('Select:' + index);
      })
  }

  build() {
    Column({ space: 20 }) {
      // Customize the password icon.
      TextInput({ placeholder: 'user define password icon' })
        .type(InputType.Password)
        .width(350)
        .height(60)
        .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 })
      // Show an underline.
      TextInput({ placeholder: 'underline style' })
        .showUnderline(true)
        .width(350)
        .height(60)
        .showError('Error')
        .showUnit(this.itemEnd)

      Text(`User name: ${this.text}`)
        .width(350)
      TextInput({ placeholder: 'Enter user name', text: this.text })
        .showUnderline(true)
        .width(350)
        .showError(this.textError)
        .onChange((value: string) => {
          this.text = value;
        })
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
          // If the entered user name is incorrect, clear the text box and display an error message.
          if (this.text == this.nameText) {
            this.textError = '';
          } else {
            this.textError = 'Incorrect user name.';
            this.text = '';
            // Call keepEditableState to maintain the editable state of the text box.
            event.keepEditableState();
          }
        })
      // Set the color of the underline.
      TextInput({ placeholder: 'Placeholder text' })
        .width(350)
        .showUnderline(true)
        .underlineColor({
          normal: Color.Orange,
          typing: Color.Green,
          error: Color.Red,
          disable: Color.Gray
        })
      TextInput({ placeholder: 'Placeholder text' })
        .width(350)
        .showUnderline(true)
        .underlineColor(Color.Gray);

    }.width('100%').margin({ top: 10 })
  }
}

TextInputError

Example 3: Implementing a Custom Keyboard

This example implements a custom keyboard using the customKeyboard attribute (available since API version 10) to set the input parameter type in value to CustomBuilder and ComponentContent.

Since API version 22, ComponentContent is added to the input parameter type of customKeyboard.

// xxx.ets
import { ComponentContent } from '@kit.ArkUI';
class BuilderParams {
  inputValue: string;
  controller: TextInputController;

  constructor(inputValue: string, controller: TextInputController) {
    this.inputValue = inputValue;
    this.controller = controller;
  }
}
@Builder
function CustomKeyboardBuilder(builderParams: BuilderParams) {
  Column() {
    Row() {
      Button('x').onClick(() => {
        // Disable the custom keyboard.
        builderParams.controller.stopEditing();
      }).margin(10)
    }

    Grid() {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
        GridItem() {
          Button(item + "")
            .width(110).onClick(() => {
            builderParams.inputValue += item;
          })
        }
      })
    }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
  }.backgroundColor(Color.Gray)
}
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController();
  @State inputValue: string = "";
  @State componentContent ?: ComponentContent<BuilderParams> = undefined;
  @State builderParam: BuilderParams = new BuilderParams(this.inputValue, this.controller);
  @State supportAvoidance: boolean = true;

  aboutToAppear(): void {
    // Create a ComponentContent instance.
    this.componentContent = new ComponentContent(this.getUIContext(), wrapBuilder(CustomKeyboardBuilder), this.builderParam);
  }
  build(){
    Column() {
      Text('Builder').margin(10).border({ width: 1 })
      TextInput({ controller: this.builderParam.controller, text: this.builderParam.inputValue })
        .customKeyboard(this.componentContent, { supportAvoidance: this.supportAvoidance })
        .margin(10).border({ width: 1 }).height('48vp')

      Text('ComponentContent').margin(10).border({ width: 1 })
      TextInput({ controller: this.builderParam.controller, text: this.builderParam.inputValue })
        .customKeyboard(CustomKeyboardBuilder(this.builderParam), { supportAvoidance: this.supportAvoidance })
        .margin(10).border({ width: 1 }).height('48vp')
    }
  }
}

customKeyboard

Example 4: Customizing the Cancel Button Style on the Right

This example demonstrates how to use the cancelButton attribute to customize the style of the cancel button on the right side of the text box.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ placeholder: 'input ...', controller: this.controller })
        .width(380)
        .height(60)
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: {
            size: 45,
            // Replace $r('app.media.startIcon') with the image resource file you use.
            src: $r('app.media.startIcon'),
            color: Color.Blue
          }
        })
        .onChange((value: string) => {
          this.text = value;
        })
    }
  }
}

cancelButton

Example 5: Setting a Character Counter

This example demonstrates how to implement a character counter using the maxLength, showCounter (available since API version 11), and showUnderline (available since API version 10) attributes.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
        .showUnderline(true)
        .showCounter(true,
          { thresholdPercentage: 50, highlightBorder: true })
          // The character counter is in this format: Number of characters that have been entered/Maximum number of characters allowed, which is specified by maxLength().
          // The character counter is displayed when the number of characters that have been entered is greater than or equal to the maximum number of characters multiplied by 50% (threshold percentage).
          // When highlightBorder is set to false, the text box border does not turn red when the input exceeds the maximum character limit. The default value is true.
        .onChange((value: string) => {
          this.text = value;
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

TextInputCounter

Example 6: Formatting a Phone Number

This example demonstrates how to format a phone number as "XXX XXXX XXXX" through the onChange callback.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State submitValue: string = '';
  @State text: string = '';
  public readonly NUM_TEXT_MAXSIZE_LENGTH = 13;
  @State telNumberNoSpace: string = "";
  @State nextCaret: number = -1; // Used to record the position for the next caret setting.
  @State actualCh: number = -1; // Used to record the insertion or deletion position relative to the i-th digit of the caret.
  @State lastCaretPosition: number = 0;
  @State lastCaretPositionEnd: number = 0;
  controller: TextInputController = new TextInputController();

  isEmpty(str?: string): boolean {
    return str == 'undefined' || !str || !new RegExp("[^\\s]").test(str);
  }

  checkNeedNumberSpace(numText: string) {
    let isSpace: RegExp = new RegExp('[\\+;,#\\*]', 'g');
    let isRule: RegExp = new RegExp('^\\+.*');

    if (isSpace.test(numText)) {
      // If the phone number contains special characters, no space is added.
      if (isRule.test(numText)) {
        return true;
      } else {
        return false;
      }
    }
    return true;
  }

  removeSpace(str: string): string {
    if (this.isEmpty(str)) {
      return '';
    }
    return str.replace(new RegExp("[\\s]", "g"), '');
  }

  setCaret() {
    if (this.nextCaret != -1) {
      console.info("to keep caret position right, change caret to", this.nextCaret);
      this.controller.caretPosition(this.nextCaret);
      this.nextCaret = -1;
    }
  }

  calcCaretPosition(nextText: string) {
    let befNumberNoSpace: string = this.removeSpace(this.text);
    this.actualCh = 0;
    if (befNumberNoSpace.length < this.telNumberNoSpace.length) { // Insertion scenario
      for (let i = 0; i < this.lastCaretPosition; i++) {
        if (this.text[i] != ' ') {
          this.actualCh += 1;
        }
      }
      this.actualCh += this.telNumberNoSpace.length - befNumberNoSpace.length;
      console.info("actualCh: " + this.actualCh);
      for (let i = 0; i < nextText.length; i++) {
        if (nextText[i] != ' ') {
          this.actualCh -= 1;
          if (this.actualCh <= 0) {
            this.nextCaret = i + 1;
            break;
          }
        }
      }
    } else if (befNumberNoSpace.length > this.telNumberNoSpace.length) { // Deletion scenario
      if (this.lastCaretPosition === this.text.length) {
        console.info("Caret at last, no need to change");
      } else if (this.lastCaretPosition === this.lastCaretPositionEnd) {
        // Scenario where the backspace key on the keyboard is used to delete characters one by one
        for (let i = this.lastCaretPosition; i < this.text.length; i++) {
          if (this.text[i] != ' ') {
            this.actualCh += 1;
          }
        }
        for (let i = nextText.length - 1; i >= 0; i--) {
          if (nextText[i] != ' ') {
            this.actualCh -= 1;
            if (this.actualCh <= 0) {
              this.nextCaret = i;
              break;
            }
          }
        }
      } else {
        // When cutting or selecting text with a handle to delete multiple characters at once
        this.nextCaret = this.lastCaretPosition; // Maintain the caret position.
      }
    }
  }

  build() {
    Column() {
      Row() {
        TextInput({ text: `${this.text}`, controller: this.controller }).type(InputType.PhoneNumber).height('48vp')
          .onChange((value: string) => {
            this.telNumberNoSpace = this.removeSpace(value);
            let nextText: string = "";
            if (this.telNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) {
              nextText = this.telNumberNoSpace;
            } else if (this.checkNeedNumberSpace(value)) {
              if (this.telNumberNoSpace.length <= 3) {
                nextText = this.telNumberNoSpace;
              } else {
                let split1: string = this.telNumberNoSpace.substring(0, 3);
                let split2: string = this.telNumberNoSpace.substring(3);
                nextText = split1 + ' ' + split2;
                if (this.telNumberNoSpace.length > 7) {
                  split2 = this.telNumberNoSpace.substring(3, 7);
                  let split3: string = this.telNumberNoSpace.substring(7);
                  nextText = split1 + ' ' + split2 + ' ' + split3;
                }
              }
            } else {
              nextText = value;
            }
            console.info("onChange Triggered:" + this.text + "|" + nextText + "|" + value);
            if (this.text === nextText && nextText === value) {
              // The number has been formatted. Changing the caret position at this time will not reset the number.
              this.setCaret();
            } else {
              this.calcCaretPosition(nextText);
            }
            this.text = nextText;
          })
          .onTextSelectionChange((selectionStart, selectionEnd) => {
            // Record the caret position.
            console.info("selection change: ", selectionStart, selectionEnd);
            this.lastCaretPosition = selectionStart;
            this.lastCaretPositionEnd = selectionEnd;
          })// Supported since API version 10
      }
    }
    .width('100%')
    .height("100%")
  }
}

phone_example

Example 7: Setting Text Wrapping Rules

This example demonstrates the effects of different text wrapping rules using the wordBreak attribute, available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State textStrEn: string =
    'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.';
  @State textStrZn: string =
    '多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。';

  build() {
    Row() {
      Column() {
        Text("WordBreakType as NORMAL in the inline style:").fontSize(16).fontColor(0xCCCCCC)
        TextInput({
          text: this.textStrEn
        })
          .margin(10)
          .fontSize(16)
          .style(TextInputStyle.Inline)// Inline style
          .wordBreak(WordBreak.NORMAL) // This attribute does not take effect for the non-inline style.

        Text("WordBreakType as BREAK_ALL in the inline style, English text:").fontSize(16).fontColor(0xCCCCCC)
        TextInput({
          text: this.textStrEn
        })
          .margin(10)
          .fontSize(16)
          .style(TextInputStyle.Inline)
          .wordBreak(WordBreak.BREAK_ALL)

        Text("WordBreakType as BREAK_ALL in the inline style, Chinese text:").fontSize(16).fontColor(0xCCCCCC)
        TextInput({
          text: this.textStrZn
        })
          .margin(10)
          .fontSize(16)
          .style(TextInputStyle.Inline)
          .wordBreak(WordBreak.BREAK_ALL)

        Text("WordBreakType as BREAK_WORD in the inline style:").fontSize(16).fontColor(0xCCCCCC)
        TextInput({
          text: this.textStrEn
        })
          .margin(10)
          .fontSize(16)
          .style(TextInputStyle.Inline)
          .wordBreak(WordBreak.BREAK_WORD)
      }.width('100%')
    }.height('100%').margin(10)
  }
}

Example 8: Setting the Text Style

This example demonstrates various text styles using the lineHeight, letterSpacing, and decoration attributes, available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
        TextInput({ text: 'lineHeight unset' })
          .border({ width: 1 }).padding(10).margin(5)
        TextInput({ text: 'lineHeight 15' })
          .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
        TextInput({ text: 'lineHeight 30' })
          .border({ width: 1 }).padding(10).margin(5).lineHeight(30)

        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
        TextInput({ text: 'letterSpacing 0' })
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
        TextInput({ text: 'letterSpacing 3' })
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
        TextInput({ text: 'letterSpacing -1' })
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)

        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
        TextInput({ text: 'LineThrough, Red' })
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        TextInput({ text: 'Overline, Red, DASHED' })
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({ type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED })
        TextInput({ text: 'Underline, Red, WAVY' })
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({ type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY })
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}

TextInputDecoration

Example 9: Setting Text Feature Effects

This example demonstrates how to display text with various typographic features using the fontFeature attribute, available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text1: string = 'This is ss01 on : 0123456789';
  @State text2: string = 'This is ss01 off: 0123456789';

  build() {
    Column() {
      TextInput({ text: this.text1 })
        .fontSize(20)
        .margin({ top: 200 })
        .fontFeature("\"ss01\" on")
      TextInput({ text: this.text2 })
        .margin({ top: 10 })
        .fontSize(20)
        .fontFeature("\"ss01\" off")
    }
    .width("90%")
    .margin("5%")
  }
}

fontFeature

Example 10: Setting Custom Keyboard Avoidance

This example implements the custom keyboard avoidance effect by configuring the KeyboardOptions API (available since API version 12) through the customKeyboard attribute (available since API version 10).

// xxx.ets
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController();
  @State inputValue: string = "";
  @State height1: string | number = '80%';
  @State supportAvoidance: boolean = true;

  // Create a custom keyboard component.
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Row() {
        Button('x').onClick(() => {
          // Disable the custom keyboard.
          this.controller.stopEditing();
        }).margin(10)
      }

      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item;
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Row() {
        Button("20%")
          .fontSize(24)
          .onClick(() => {
            this.height1 = "20%";
          })
        Button("80%")
          .fontSize(24)
          .margin({ left: 20 })
          .onClick(() => {
            this.height1 = "80%";
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      .height(this.height1)
      .width("100%")
      .padding({ bottom: 50 })

      TextInput({ controller: this.controller, text: this.inputValue })// Bind a custom keyboard.
        .customKeyboard(this.CustomKeyboardBuilder(), { supportAvoidance: this.supportAvoidance })
        .margin(10)
        .border({ width: 1 })

    }
  }
}

CustomTextInputType

Example 11: Setting Text Auto-Adaptation

This example implements text auto-adaptation using the minFontSize, maxFontSize, and heightAdaptivePolicy attributes, all available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
        TextInput({ text: 'This is the text without the height adaptive policy set' })
          .width('80%').height(50).borderWidth(1).margin(1)
        TextInput({ text: 'This is the text with the height adaptive policy set' })
          .width('80%')
          .height(50)
          .borderWidth(1)
          .margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
        TextInput({ text: 'This is the text with the height adaptive policy set' })
          .width('80%')
          .height(50)
          .borderWidth(1)
          .margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
        TextInput({ text: 'This is the text with the height adaptive policy set' })
          .width('80%')
          .height(50)
          .borderWidth(1)
          .margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}

TextInputAdaptFont

Example 12: Setting Line Break Rules

This example demonstrates the effects of different line break rules using the lineBreakStrategy attribute, available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State message1: string =
    "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
      "The built-in components include buttons radio progress indicators and text You can set the rendering effect of these components in method chaining mode," +
      "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented.";
  @State lineBreakStrategyIndex: number = 0;
  @State lineBreakStrategy: LineBreakStrategy[] =
    [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED];
  @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED'];

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text('lineBreakStrategy').fontSize(16).fontColor(Color.Black)
      TextInput({ text: this.message1 })
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .maxLines(12)
        .style(TextInputStyle.Inline)
        .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex])
      Row() {
        Button('Toggle lineBreakStrategy Value: ' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => {
          this.lineBreakStrategyIndex++;
          if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) {
            this.lineBreakStrategyIndex = 0;
          }
        })
      }.margin({ top: 20 })
    }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
  }
}

textInputLineBreakStrategy

Example 13: Setting Insert and Delete Callbacks

This example implements the text insertion and deletion effects using the onWillInsert, onDidInsert, onWillDelete, and onDidDelete APIs, available since API version 12.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State insertValue: string = "";
  @State deleteValue: string = "";
  @State insertOffset: number = 0;
  @State deleteOffset: number = 0;
  @State deleteDirection: number = 0;
  @State currentValue_1: string = "";
  @State currentValue_2: string = "";

  build() {
    Row() {
      Column() {
        TextInput({ text: "Insert callbacks" })
          .height(60)
          .onWillInsert((info: InsertValue) => {
            this.insertValue = info.insertValue;
            return true;
          })
          .onDidInsert((info: InsertValue) => {
            this.insertOffset = info.insertOffset;
          })
          .onWillChange((info: EditableTextChangeValue) => {
            this.currentValue_1 = info.content
            return true
          })

        Text("insertValue:" + this.insertValue + "  insertOffset:" + this.insertOffset).height(30)
        Text("currentValue_1:" + this.currentValue_1).height(30)

        TextInput({ text: "Delete callbacks" })
          .height(60)
          .onWillDelete((info: DeleteValue) => {
            this.deleteValue = info.deleteValue;
            this.deleteDirection = info.direction;
            return true;
          })
          .onDidDelete((info: DeleteValue) => {
            this.deleteOffset = info.deleteOffset;
            this.deleteDirection = info.direction;
          })
          .onWillChange((info: EditableTextChangeValue) => {
            this.currentValue_2 = info.content
            return true
          })

        Text("deleteValue:" + this.deleteValue + "  deleteOffset:" + this.deleteOffset).height(30)
        Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30)
        Text("currentValue_2:" + this.currentValue_2).height(30)

      }.width('100%')
    }
    .height('100%')
  }
}

This example implements custom menu extension items for text using the editMenuOptions API (available since API version 12), allowing configuration of text content, icons, and callbacks. Menu data can be configured through the onPrepareMenu callback (available since API version 20).

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = 'TextInput editMenuOptions';
  @State endIndex: number = 0;
  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
    // Replace $r('app.media.startIcon') with the image resource file you use.
    // TextMenuItemId.autoFill is supported since API version 23.
    const idsToFilter: TextMenuItemId[] = [
      TextMenuItemId.autoFill
    ]
    const items = menuItems.filter(item => !idsToFilter.some(id => id.equals(item.id)))
    let item1: TextMenuItem = {
      content: 'create1',
      icon: $r('app.media.startIcon'),
      id: TextMenuItemId.of('create1'),
    };
    let item2: TextMenuItem = {
      content: 'create2',
      id: TextMenuItemId.of('create2'),
      icon: $r('app.media.startIcon'),
    };
    items.push(item1);
    items.unshift(item2);
    return items;
  }
  onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => {
    if (menuItem.id.equals(TextMenuItemId.of("create2"))) {
      console.info("Intercept id: create2 start:" + textRange.start + "; end:" + textRange.end);
      return true;
    }
    if (menuItem.id.equals(TextMenuItemId.of("prepare1"))) {
      console.info("Intercept id: prepare1 start:" + textRange.start + "; end:" + textRange.end);
      return true;
    }
    if (menuItem.id.equals(TextMenuItemId.COPY)) {
      console.info("Intercept COPY start:" + textRange.start + "; end:" + textRange.end);
      return true;
    }
    if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) {
      console.info("Do not intercept SELECT_ALL start:" + textRange.start + "; end:" + textRange.end);
      return false;
    }
    return false;
  }
  // Replace $r('app.media.startIcon') with the image resource file you use.
  onPrepareMenu = (menuItems: Array<TextMenuItem>) => {
    let item1: TextMenuItem = {
      content: 'prepare1_' + this.endIndex,
      icon: $r('app.media.startIcon'),
      id: TextMenuItemId.of('prepare1'),
    };
    menuItems.unshift(item1);
    return menuItems;
  }
  @State editMenuOptions: EditMenuOptions = {
    onCreateMenu: this.onCreateMenu,
    onMenuItemClick: this.onMenuItemClick,
    onPrepareMenu: this.onPrepareMenu
  };

  build() {
    Column() {
      TextInput({ text: this.text })
        .width('95%')
        .height(50)
        .editMenuOptions(this.editMenuOptions)
        .margin({ top: 100 })
        .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
          this.endIndex = selectionEnd;
        })
    }
    .width("90%")
    .margin("5%")
  }
}

textInputEditMenuOptions

Example 15: Setting a Symbol-Type Cancel Button

This example demonstrates how to set the style of the symbol-type cancel button on the right side within the text box using the cancelButton attribute, available from API version 18.

import { SymbolGlyphModifier } from '@kit.ArkUI';

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  symbolModifier: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.trash')).fontColor([Color.Red]).fontSize(16).fontWeight(FontWeight.Regular);

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...' })
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: this.symbolModifier
        })
    }
  }
}

cancelButton

Example 16: Setting Text Overflow

This example demonstrates text ellipsis for overflow content and ellipsis position adjustment using the textOverflow, ellipsisMode, and style attributes. The MULTILINE_START and MULTILINE_CENTER types are used to implement ellipsis at the start and middle positions for both single-line and multi-line text scenarios.

The style attribute can be used to set the text box style, available since API version 9.

The textOverflow attribute can be used to set the display mode for overflow text, available since API version 12.

The ellipsisMode attribute can be used to set the ellipsis position, available since API version 18.

The MULTILINE_START and MULTILINE_CENTER enums are added to the EllipsisMode attribute since API version 24.

// xxx.ets
@Entry
@Component
struct EllipsisModeExample {
  @State text: string = "As the sun begins to set, casting a warm golden hue across the sky," +
    "the world seems to slow down and breathe a sigh of relief. The sky is painted with hues of orange, " +
    " pink, and lavender, creating a breath taking tapestry that stretches as far as the eye can see." +
    "The air is filled with the sweet scent of blooming flowers, mingling with the earthy aroma of freshly turned soil.";
  @State ellipsisModeIndex: number = 0;
  @State ellipsisMode: (EllipsisMode | undefined | null)[] =
    [EllipsisMode.END, EllipsisMode.START, EllipsisMode.CENTER, EllipsisMode.MULTILINE_START,
      EllipsisMode.MULTILINE_CENTER]; // MULTILINE_START and MULTILINE_CENTER are added since API version 24.
  @State ellipsisModeStr: string[] = ['END ', 'START', 'CENTER', 'MULTILINE_START', 'MULTILINE_CENTER'];
  @State textOverflowIndex: number = 0;
  @State textOverflow: TextOverflow[] = [TextOverflow.Ellipsis, TextOverflow.Clip];
  @State textOverflowStr: string[] = ['Ellipsis', 'Clip'];
  @State styleInputIndex: number = 0;
  @State styleInput: TextInputStyle[] = [TextInputStyle.Inline, TextInputStyle.Default];
  @State styleInputStr: string[] = ['Inline', 'Default'];

  build() {
    Row() {
      Column({ space: 20 }) {
        TextInput({ text: this.text })
          .textOverflow(this.textOverflow[this.textOverflowIndex])
          .ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex])
          .style(this.styleInput[this.styleInputIndex])
          .fontSize(30)
          .margin(30)
        Button('ellipsisMode Value: ' + this.ellipsisModeStr[this.ellipsisModeIndex]).onClick(() => {
          this.ellipsisModeIndex++;
          if (this.ellipsisModeIndex > (this.ellipsisModeStr.length - 1)) {
            this.ellipsisModeIndex = 0;
          }
        }).fontSize(20)
        Button('textOverflow Value: ' + this.textOverflowStr[this.textOverflowIndex]).onClick(() => {
          this.textOverflowIndex++;
          if (this.textOverflowIndex > (this.textOverflowStr.length - 1)) {
            this.textOverflowIndex = 0;
          }
        }).fontSize(20)
        Button('Style Value: ' + this.styleInputStr[this.styleInputIndex]).onClick(() => {
          this.styleInputIndex++;
          if (this.styleInputIndex > (this.styleInputStr.length - 1)) {
            this.styleInputIndex = 0;
          }
        }).fontSize(20)
      }
    }
  }
}

Example 17: Implementing Callbacks for Input Status Changes and More

This example uses the onEditChange, onCopy, onCut, onPaste (available since API version 8), onContentScroll (available from API version 10), onWillCopy, and onWillCut callbacks to monitor the input status change, implement copy, cut, paste, and content scrolling effects, and disable system copy/cut features. In addition, you can set the selectAll (available from API version 11) attribute to select all text in the text box in the initial state.

The onWillCopy and onWillCut APIs are added since API version 26.0.0.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State editStatus: boolean = false;
  @State copyValue: string = "";
  @State cutValue: string = "";
  @State pasteValue: string = "";
  @State totalOffsetX: number = 0;
  @State totalOffsetY: number = 0;

  build() {
    Row() {
      Column() {
        TextInput({ text: "TextInput supports the callback on input status changes" })
          .height(60)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily("HarmonyOS Sans")
          .copyOption(CopyOptions.LocalDevice)
          .textAlign(TextAlign.Center)
          .selectedBackgroundColor(Color.Blue)
          .caretStyle({ width: '4vp' })
          .caretPosition(10)
          .selectionMenuHidden(true)
          .onEditChange((status: boolean) => {
            this.editStatus = status;
          })
          .defaultFocus(true)// Set the TextInput component to obtain focus by default.
          .enableKeyboardOnFocus(false)
          .selectAll(false)

        Text("editStatus:" + this.editStatus).height(30)

        TextInput({ text: "TextInput supports the callback on copy operations" })
          .height(60)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily("HarmonyOS Sans")
          .copyOption(CopyOptions.LocalDevice)
          .textAlign(TextAlign.Center)
          .selectedBackgroundColor(Color.Blue)
          .caretStyle({ width: '4vp' })
          .onCopy((copyValue: string) => {
            this.copyValue = copyValue;
          })
          // onWillCopy is supported since API version 26.0.0.
          .onWillCopy((value: string) => {
            console.info(`on will copy ${value}`);
            return false;
          })

        Text("copyValue:" + this.copyValue).height(30)

        TextInput({ text: "TextInput supports the callback on cut operations" })
          .height(60)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily("HarmonyOS Sans")
          .copyOption(CopyOptions.LocalDevice)
          .textAlign(TextAlign.Center)
          .selectedBackgroundColor(Color.Blue)
          .caretStyle({ width: '4vp' })
          .onCut((cutValue: string) => {
            this.cutValue = cutValue;
          })
          // onWillCut is supported since API version 26.0.0.
          .onWillCut((value: string) => {
            console.info(`on will cut ${value}`);
            return false;
          })

        Text("cutValue:" + this.cutValue).height(30)

        TextInput({ text: "TextInput supports the callback on paste operations" })
          .height(60)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily("HarmonyOS Sans")
          .copyOption(CopyOptions.LocalDevice)
          .textAlign(TextAlign.Center)
          .selectedBackgroundColor(Color.Blue)
          .caretStyle({ width: '4vp' })
          .onPaste((pasteValue: string) => {
            this.pasteValue = pasteValue;
          })

        Text("pasteValue:" + this.pasteValue).height(30)

        TextInput({ text: "TextInput supports the callback on content scrolling: Scroll the text to see offset changes when the text width exceeds the text box width" })
          .height(60)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily("HarmonyOS Sans")
          .copyOption(CopyOptions.LocalDevice)
          .textAlign(TextAlign.Center)
          .selectedBackgroundColor(Color.Blue)
          .caretStyle({ width: '4vp' })
          .onContentScroll((totalOffsetX: number, totalOffsetY: number) => {
            this.totalOffsetX = totalOffsetX;
            this.totalOffsetY = totalOffsetY;
          })

        Text("totalOffsetX:" + this.totalOffsetX + "  totalOffsetY:" + this.totalOffsetY).height(30)

      }.width('100%')
    }
    .height('100%')
  }
}

TextInputEditChange

Example 18: Setting the Minimum and Maximum Font Scale Factors

This example demonstrates how to set the minimum and maximum font scale factors using minFontScale and maxFontScale, available since API version 18. (This example uses system APIs. The application type needs to be adjusted to a system application. For details, see Available APIs.)

// Enable application font scaling to follow system settings.
// Create a new directory named profile in the following path: AppScope/resources/base.
// Inside the newly created profile directory, create a file named configuration.json.
// Add the following code to the configuration.json file:
{
  "configuration": {
    "fontSizeScale": "followSystem",
    "fontSizeMaxScale": "3.2"
  }
}

// Modify the app.json5 file in AppScope as follows:
{
  "app": {
    "bundleName": "com.example.myapplication",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name",
    "configuration": "$profile:configuration"
  }
}

// xxx.ets
import { abilityManager, Configuration } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TextInputExample {
  @State currentFontSizeScale: number = 1;
  @State minFontScale: number = 0.85;
  @State maxFontScale: number = 2;

  // Set the font size.
  async setFontScale(scale: number): Promise<void> {
    let configInit: Configuration = {
      language: 'zh-Ch',
      fontSizeScale: scale,
    };
    // Update system font scaling.
    // Add the ohos.permission.UPDATE_CONFIGURATION permission to the requestPermissions field in the module.json5 file of the project.
    abilityManager.updateConfiguration(configInit, (err: BusinessError) => {
      if (err) {
        console.error(`updateConfiguration fail, err: ${JSON.stringify(err)}`);
      } else {
        this.currentFontSizeScale = scale;
        console.info('updateConfiguration success.');
      }
    });
  }

  build() {
    Column() {
      Column({ space: 30 }) {
        Text("通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。")
        TextInput({
          placeholder: 'The text area can hold an unlimited amount of text. input your word...',
          text: '通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。'
        })
          .minFontScale(this.minFontScale)// Set the minimum font scale factor. If the parameter is set to undefined, the default scale factor is used.
          .maxFontScale(this.maxFontScale) // Set the maximum font scale factor. If the parameter is set to undefined, the default scale factor is used.
      }.width('100%')

      Column() {
        Row() {
          Button('1倍').onClick(() => {
            this.setFontScale(1)
          }).margin(10)
          Button('1.75倍').onClick(() => {
            this.setFontScale(1.75)
          }).margin(10)
        }

        Row() {
          Button('2倍').onClick(() => {
            this.setFontScale(2)
          }).margin(10)
          Button('3.2倍').onClick(() => {
            this.setFontScale(3.2)
          }).margin(10)
        }
      }.margin({ top: 50 })
    }
  }
}

System font scale factor: 2x	System font scale factor: 3.2x

Example 19: Setting Text Selection for a Specified Region

This example demonstrates how to set text selection for a specified region and the display/hide strategy of the menu using the setTextSelection API, available since API version 10.

// xxx.ets

@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController();
  @State startIndex: number = 0;
  @State endIndex: number = 0;

  build() {
    Column({ space: 3 }) {
      Text('Selection start:' + this.startIndex + ' end:' + this.endIndex)
      TextInput({ text: 'Hello World', controller: this.controller })
        .width('95%')
        .height(40)
        .defaultFocus(true)
        .enableKeyboardOnFocus(true)
        .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
          this.startIndex = selectionStart;
          this.endIndex = selectionEnd;
        })

      Button('setTextSelection [0,3], set menuPolicy is MenuPolicy.SHOW')
        .onClick(() => {
          this.controller.setTextSelection(0, 3, { menuPolicy: MenuPolicy.SHOW });
        })
    }
    .width('100%')
    .height('100%')
  }
}

textInputSetTextSelection

Example 20: Setting Text Stroke

This example demonstrates how to set the stroke width and color for text using the strokeWidth and strokeColor attributes, available since API version 20.

// xxx.ets
import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('stroke feature').fontSize(9).fontColor(0xCCCCCC)

        TextInput({ text: 'Text without stroke' })
          .width('100%')
          .height(60)
          .borderWidth(1)
          .fontSize(40)
        TextInput({ text: 'Text with stroke' })
          .width('100%')
          .height(60)
          .borderWidth(1)
          .fontSize(40)
          .strokeWidth(LengthMetrics.px(-3.0))
          .strokeColor(Color.Red)
        TextInput({ text: 'Text with stroke' })
          .width('100%')
          .height(60)
          .borderWidth(1)
          .fontSize(40)
          .strokeWidth(LengthMetrics.px(3.0))
          .strokeColor(Color.Red)
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}

textInputSetStroke

Example 21: Configuring Automatic Spacing Between Chinese and Western Text

This example demonstrates how to configure automatic spacing between Chinese and Western characters using the enableAutoSpacing attribute, available since API version 20.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('Automatic spacing: Enabled').margin(5)
        TextInput({text: '中文 Text'})
          .enableAutoSpacing(true)
        Text('Automatic spacing: Disabled').margin(5)
        TextInput({text: '中文Text'})
          .enableAutoSpacing(false)
      }.height('100%')
    }
    .width('60%')
  }
}

textInputEnableAutoSpacing

Example 22: Setting the Normal and Overflow Colors of the Character Counter

This example demonstrates how to set the normal and overflow colors of the character counter using the counterTextColor and counterTextOverflowColor parameters (available since API version 22) of the showCounter attribute.

import { ColorMetrics } from '@kit.ArkUI';

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
        .showCounter(true, {
          thresholdPercentage: 50,
          highlightBorder: true,
          counterTextColor: ColorMetrics.resourceColor(Color.Red),
          counterTextOverflowColor: ColorMetrics.resourceColor(Color.Orange)
        })
        .onChange((value: string) => {
          this.text = value;
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

TextInputShowCounterColor

Example 23: Setting the Placeholder Rich Text Style

This example demonstrates how to set the placeholder rich text style using the setStyledPlaceholder API, available since API version 22.

// xxx.ets
import { LengthMetrics } from '@kit.ArkUI';
@Entry
@Component
struct TextInputExample  {
  styledString: MutableStyledString =
    new MutableStyledString("Text box rich text: Text",
      [
        {
          start: 0,
          length: 7,
          styledKey: StyledStringKey.FONT,
          styledValue: new TextStyle({
            fontColor: Color.Orange,
            fontSize: LengthMetrics.fp(24)
          })
        },
        {
          start: 7,
          length: 4,
          styledKey: StyledStringKey.FONT,
          styledValue: new TextStyle({
            fontColor: Color.Gray,
            fontSize: LengthMetrics.fp(20),
            strokeWidth: LengthMetrics.px(-5),
            strokeColor: Color.Black,
          })
        },
        {
          start: 0,
          length: 1,
          styledKey: StyledStringKey.PARAGRAPH_STYLE,
          styledValue: new ParagraphStyle({
            textVerticalAlign: TextVerticalAlign.CENTER
          })
        }
      ]);
  controllerInput: TextInputController = new TextInputController();

  aboutToAppear() {
    this.controllerInput.setStyledPlaceholder(this.styledString)
  }

  build() {
    Scroll() {
      Column() {
        Text("TextInput Placeholder Rich Text")
          .fontSize(8)
        TextInput({
          controller: this.controllerInput
        })
          .fontSize(24)
          .margin(10)
      }
      .width('100%')
    }
  }
}

textInputPlaceholder

Example 24: Setting Input Method Extension Information

This example demonstrates how to set input method extension information using the setExtraConfig method of IMEClient, available since API version 22.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  build() {
    Column() {
      TextInput({ text: 'Execute the onWillAttachIME callback before starting the input method.'})
        .onWillAttachIME((client: IMEClient) => {
          client.setExtraConfig({
            customSettings: {
              name: "TextInput", // Custom property
              id: client.nodeId // Custom Property
            }
          })
        })
    }.height('100%')
  }
}

Example 25: Setting the Scrollbar Display Mode for the Inline Style in the Editing State

This example demonstrates how to set the scrollbar display or hidden state for the inline style in the editing state using the barState API, available since API version 10.

@Entry
@Component
struct demo {
  @State message: string = 'This is a long text. '.repeat(10)

  build() {
    Column({ space: 20 }) {
      TextInput({ text: 'Inline style, set to BarState.On. ' + this.message })
        .style(TextInputStyle.Inline)
        .barState(BarState.On)

      TextInput({ text: 'Inline style, set to BarState.Off. ' + this.message })
        .style(TextInputStyle.Inline)
        .barState(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}

Example 26: Setting Leading Punctuation Compression

This example demonstrates how to set leading punctuation compression using the compressLeadingPunctuation API. If a punctuation mark with a leading space appears at the start of a line, the punctuation mark will be compressed to the left boundary.

The compressLeadingPunctuation API is supported since API version 23.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column(){
      TextInput({ text: "\u300CLeading punctuation compression enabled" })
        .compressLeadingPunctuation(true)
        .margin(5)
        .style(TextInputStyle.Inline)
        .fontSize(30)
        .width("90%")
      TextInput({ text: "\u300CLeading punctuation compression disabled" })
        .compressLeadingPunctuation(false)
        .style(TextInputStyle.Inline)
        .fontSize(30)
        .width("90%")
    }
  }
}

Example 27: Setting Adaptative Spacing

This example uses the includeFontPadding API to add the spacing of the first and last lines and the fallbackLineSpacing API to set adaptive line spacing.

The includeFontPadding and fallbackLineSpacing APIs are supported since API version 23.

// xxx.ets

const UYGHUR_TEXT: string = 'ياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەن';
@Entry
@Component
struct Index {
  @State include: boolean | null | undefined = false;
  @State fallback: boolean | null | undefined = false;
  @State displayText: string = UYGHUR_TEXT;

  build() {
    Column() {
      TextInput({
        text: this.displayText,
        placeholder: 'Enter'
      })
        .includeFontPadding(this.include)
        .fallbackLineSpacing(this.fallback)
        .lineHeight(5)
        .width('100%')
        .height(100)
        .backgroundColor('#eee')
        .borderWidth(1)
        .borderColor('#dddddd')

      Scroll() {
        Column() {
          // --- Buttons related to IncludeFontPadding ---
          Button('Set includePadding: ' + this.include)
            .onClick(() => {
              this.include = this.include === false ? true : false;
            })
            .margin({ bottom: 10 })

          // --- Button related to FallbackLineSpacing ---
          Button('Set fallbackLineSpacing: ' + this.fallback)
            .onClick(() => {
              this.fallback = this.fallback === false ? true : false;
            })
            .margin({ bottom: 10 })

        }
        .width('100%')
        .padding(5)
      }
      .height(250)
      .backgroundColor('transparent')
      .scrollBarWidth(2)
      .scrollBarColor('#888')

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

Example 28: Setting the Drag Preview Style for Text Being Dragged

This example demonstrates how to set the drag preview style for text being dragged using the selectedDragPreviewStyle API.

The selectedDragPreviewStyle API is supported since API version 23.

@Entry
@Component
struct TextInputTest {
  build() {
    Column() {
      TextInput({ text: 'HelloWorld', placeholder: 'please input words' })
        .copyOption(CopyOptions.InApp)
        .width(200)
        .height(50)
        .margin(150)
        .draggable(true)
        .selectedDragPreviewStyle({color: 'rgba(227, 248, 249, 1)'})
    }
    .height('100%')
  }
}

selectedDragPreviewStyle

Example 29: Deleting the Last Character in a Text Box

This example demonstrates how to delete the last character in a text box using the deleteBackward API.

The deleteBackward API is added since API version 23.

@Entry
@Component
struct Page {
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: 'Deletebackward example', controller: this.controller })
      Button('Delete backward')
        .onClick(() => {
          this.controller.deleteBackward();
        })
    }
  }
}

textInputDeleteBackward

Example 30: Setting the Text Layout Direction

This example demonstrates how to set the text layout direction using the textDirection API.

The textDirection API is supported since API version 23.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = 'TextInput text direction example';

  build() {
    Column() {
      Text('TextInput text direction: RTL, component layout direction: default')
        .fontSize(12).width('90%').margin(5)
      TextInput({ text: this.text })
        .width(336)
        .fontSize(16)
        .textDirection(TextDirection.RTL)
        .showCounter(true)
        .maxLength(50)
      Text('TextInput text direction: RTL, component layout direction: default, horizontal alignment: LEFT')
        .fontSize(12).width('90%').margin(5)
      TextInput({ text: this.text })
        .width(336)
        .fontSize(16)
        .textDirection(TextDirection.RTL)
        .showCounter(true)
        .maxLength(50)
        .textAlign(TextAlign.LEFT)
      Text('TextInput text direction: LTR, component layout direction: Rtl')
        .fontSize(12).width('90%').margin(5)
      TextInput({ text: this.text })
        .width(336)
        .fontSize(16)
        .textDirection(TextDirection.LTR)
        .direction(Direction.Rtl)
        .maxLength(50)
        .showCounter(true)
    }.width('100%').height('100%')
  }
}

Example 31: Scrolling the Text in a Specified Range to the Visible Area

This example demonstrates how to scroll the text in a specified range to the visible area using the scrollToVisible API.

The scrollToVisible API is supported since API version 23.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = '1234567891234567891234😁😁😁6789123456789123456789012121214521';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .width(336)
        .height(56)
      Button("Scroll Text to Visible Area").onClick(()=> {
        this.controller.scrollToVisible({ start: 22, end: 30})
      })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

Example 32: Enabling/Disabling Orphan Character Optimization During Text Typesetting

This example demonstrates how to use the orphanCharOptimization API to enable/disable orphan word optimization, ensuring no orphan character appears in the last line of a paragraph.

The orphanCharOptimization API is supported since API version 26.0.0.

// xxx.ets
@Entry
@Component
struct TextExample {
  @State text: string = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa文本aaaaaaaaaaaaa';

  build() {
    Column({ space: 3 }) {
      Text('TextInput disables orphan character optimization.')
        .fontSize(12).width('90%').margin(5)
      TextInput({ text: this.text })
        .fontSize(20)
        .width('384')
        .borderWidth(1)
        .style(TextInputStyle.Inline)
      Text('TextInput enables orphan character optimization.')
        .fontSize(12).width('90%').margin(5)
      TextInput({ text: this.text })
        .fontSize(20)
        .width('384')
        .borderWidth(1)
        .orphanCharOptimization(true)
        .style(TextInputStyle.Inline)
    }
    .width('100%')
    .height('100%')
  }
}

Disabling orphan character optimization:

textInputOrphanCharOptimization1

Enabling orphan character optimization:

textInputOrphanCharOptimization2

TextInput

Child Components

APIs

TextInputOptions

Attributes

type

placeholderColor

placeholderFont

enterKeyType

caretColor

maxLength

fontColor

fontSize

fontStyle

fontWeight

fontFamily

inputFilter8+

copyOption9+

showPasswordIcon9+

style9+

textAlign9+

textDirection23+

selectedBackgroundColor10+

caretStyle10+

caretPosition10+

showUnit10+

showError10+

showUnderline10+

passwordIcon10+

enableKeyboardOnFocus10+

selectionMenuHidden10+

barState10+

maxLines10+

customKeyboard10+

enableAutoFill11+

enableSelectedDataDetector22+

passwordRules11+

cancelButton11+

selectAll11+

showCounter11+

contentType12+

underlineColor12+

lineHeight12+

decoration12+

letterSpacing12+

fontFeature12+

wordBreak12+

textOverflow12+

textIndent12+

minFontSize12+

maxFontSize12+

heightAdaptivePolicy12+

showPassword12+

lineBreakStrategy12+

editMenuOptions12+

enablePreviewText12+

enableHapticFeedback13+

autoCapitalizationMode20+

keyboardAppearance15+

strokeWidth20+

strokeColor20+

stopBackPress15+

halfLeading18+

minFontScale18+

maxFontScale18+

cancelButton18+

ellipsisMode18+

enableAutoFillAnimation20+

enableAutoSpacing20+

compressLeadingPunctuation23+

orphanCharOptimization

includeFontPadding23+

fallbackLineSpacing23+

selectedDragPreviewStyle23+

InputType

ContentType12+

TextInputStyle9+

PasswordIcon10+

EnterKeyType

Events

inputFilter⁸⁺

copyOption⁹⁺

showPasswordIcon⁹⁺

style⁹⁺

textAlign⁹⁺

textDirection²³⁺

selectedBackgroundColor¹⁰⁺

caretStyle¹⁰⁺

caretPosition¹⁰⁺

showUnit¹⁰⁺

showError¹⁰⁺

showUnderline¹⁰⁺

passwordIcon¹⁰⁺

enableKeyboardOnFocus¹⁰⁺

selectionMenuHidden¹⁰⁺

barState¹⁰⁺

maxLines¹⁰⁺

customKeyboard¹⁰⁺

enableAutoFill¹¹⁺

enableSelectedDataDetector²²⁺

passwordRules¹¹⁺

cancelButton¹¹⁺

selectAll¹¹⁺

showCounter¹¹⁺

contentType¹²⁺

underlineColor¹²⁺

lineHeight¹²⁺

decoration¹²⁺

letterSpacing¹²⁺

fontFeature¹²⁺

wordBreak¹²⁺

textOverflow¹²⁺

textIndent¹²⁺

minFontSize¹²⁺

maxFontSize¹²⁺

heightAdaptivePolicy¹²⁺

showPassword¹²⁺

lineBreakStrategy¹²⁺

editMenuOptions¹²⁺

enablePreviewText¹²⁺

enableHapticFeedback¹³⁺

autoCapitalizationMode²⁰⁺

keyboardAppearance¹⁵⁺

strokeWidth²⁰⁺

strokeColor²⁰⁺

stopBackPress¹⁵⁺

halfLeading¹⁸⁺

minFontScale¹⁸⁺

maxFontScale¹⁸⁺

cancelButton¹⁸⁺

ellipsisMode¹⁸⁺

enableAutoFillAnimation²⁰⁺

enableAutoSpacing²⁰⁺

compressLeadingPunctuation²³⁺

includeFontPadding²³⁺

fallbackLineSpacing²³⁺

selectedDragPreviewStyle²³⁺

ContentType¹²⁺

TextInputStyle⁹⁺

PasswordIcon¹⁰⁺

onEditChanged^(deprecated)

onEditChange⁸⁺

onCopy⁸⁺

onCut⁸⁺

onPaste⁸⁺

onTextSelectionChange¹⁰⁺

onContentScroll¹⁰⁺

onSecurityStateChange¹²⁺

onWillInsert¹²⁺

onDidInsert¹²⁺

onWillDelete¹²⁺

onDidDelete¹²⁺

onWillChange¹⁵⁺

onWillAttachIME²⁰⁺

TextInputController⁸⁺

constructor⁸⁺

caretPosition⁸⁺

setTextSelection¹⁰⁺

stopEditing¹⁰⁺

UnderlineColor¹²⁺