
ArkUI TextInput Read-Only Patterns for HarmonyOS: enabled(false), focusOnTouch(false), focusable(false)
Requirement Description
Prevent users from editing the content of a TextInput while keeping the UI behavior and look appropriate for HarmonyOS (including wearables).
Background Knowledge
-
enabled(boolean)— common attribute to control whether a component is interactive. When set tofalse, the system applies a disabled (grayscale) style. (Docs) -
focusOnTouch(boolean)— controls whether the component can gain focus via tap; useful for tap-to-focus components likeTextInput. (Docs) -
focusable(boolean)— general focus capability toggle for most components. Whenfalse, the component cannot obtain focus. (Docs)
Implementation Steps
Choose one of the following based on your UX requirements:
Disable interaction and show disabled style
Use.enabled(false)when you want the control to be clearly non-interactive and allow the system’s disabled styling.Block tap-to-focus but keep normal visual
Use.focusOnTouch(false)to prevent the keyboard/focus while preserving the normal (non-disabled) appearance.Completely remove focusability
Use.focusable(false)for a general, comprehensive way to block focus from any source.
Code Snippet / Configuration
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column({ space: 16 }) {
// Option 1: Disabled look + no interaction
TextInput({ text: this.message })
.enabled(false)
.fontColor(Color.Blue)
// Option 2: No tap-to-focus, keeps normal visual
TextInput({ text: this.message })
.focusOnTouch(false)
.fontColor(Color.Gray)
// Option 3: Not focusable at all
TextInput({ text: this.message })
.focusable(false)
.fontColor(Color.Brown)
}
.padding(10)
}
}
Test Results
Verified on API Version 19 Release with HarmonyOS 5.1.1 Release SDK in DevEco Studio 5.1.1 Release: editing is blocked in all three options; visuals differ as described.
Limitations or Considerations
-
.enabled(false)changes the control’s appearance (disabled/grayscale). If you must keep the normal look, prefer.focusOnTouch(false)or.focusable(false). - If text is rarely edited, consider rendering with
Textfor read-only display and switching toTextInputonly when an explicit “Edit” action is triggered. -
Wearables: to avoid accidental keyboard/focus on small screens, defaulting to
.focusOnTouch(false)(or.focusable(false)) is often the best UX.
Related Documents or Links
Written by Bunyamin Eymen Alagoz
United States
NORTH AMERICA
Related News
What Does "Building in Public" Actually Mean in 2026?
19h ago
The Agentic Headless Backend: What Vibe Coders Still Need After the UI Is Done
19h ago
Why I’m Still Learning to Code Even With AI
21h ago
I gave Claude a persistent memory for $0/month using Cloudflare
1d ago
NYT: 'Meta's Embrace of AI Is Making Its Employees Miserable'
1d ago
