Disable Editing in TextInput Component

#harmonyos #textinputcomponent #noneditabletextinput #arkts

Read the original article：Disable Editing in TextInput Component

Requirement Description

How to make the content of a TextInput component non-editable while keeping it visible to the user.

Background Knowledge

HarmonyOS provides several universal component properties that control interaction and focus behavior:

Property	Description
`enabled`	Determines whether the component is interactive. When set to `false`, the system automatically applies a disabled (grayed-out) style.
`focusOnTouch`	Controls whether the component gains focus when tapped. Useful for components that are normally interactive (like `TextInput`).
`focusable`	Determines whether the component can gain focus at all. When `false`, the component cannot become active or editable.

Implementation Steps

Use enabled(false)
Use focusOnTouch(false)
Use focusable(false)

Code Snippets

Solution 1: Use enabled(false)

When the component’s enabled property is set to false, the TextInput becomes read-only and non-interactive.
However, note that the system applies a gray-out style automatically.

Solution 2: Use focusOnTouch(false)

Prevents the TextInput from gaining focus upon touch, effectively disabling text editing while preserving the original color and layout style.

Solution 3: Use focusable(false)

A universal approach that makes the component completely unfocusable — suitable for situations where you want to visually keep the field unchanged but block input interaction.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 16 }) {
      // Solution 1: Disabled (grayed-out style)
      TextInput({ text: this.message })
        .enabled(false)
        .fontColor(Color.Blue)

      // Solution 2: Prevent focus on touch (keeps original color)
      TextInput({ text: this.message })
        .focusOnTouch(false)
        .fontColor(Color.Gray)

      // Solution 3: Unfocusable (completely non-interactive)
      TextInput({ text: this.message })
        .focusable(false)
        .fontColor(Color.Brown)
    }
    .padding(10)
  }
}

Test Results

Without Editing Enabled:

The user cannot modify or delete the text content.
Styles vary depending on the method used.

Limitations or Considerations

Supported on API Version ≥ 20 Release.
Requires HarmonyOS 6.0.0 Release SDK or higher.
Must be compiled and tested using DevEco Studio 6.0.0 Release or later.

DEV Community