Basic layout
Grow from one line to 5–6 (MDN, n.d.-a); attach left, send right, mic when empty. Speech is faster (Ruan et al., 2018), so surface voice input. Decide Enter behavior with enterkeyhint (MDN, n.d.-b; Apple, n.d.).
Avoid keyboard overlap
Move with the keyboard (Android Developers, n.d.) and respect the safe area. Typos are common (Reyal et al., 2015), so save drafts; choose suitable keyboard types.
Delivery states and accessibility
Show sending → sent; on failure keep text with Resend. Label icon buttons and announce status (W3C, 2023, 4.1.2/4.1.3).
FAQ
- Should Enter send?
- Often newline on mobile; send is fine for short chats.
- What if the keyboard covers the input?
- Track keyboard height and respect safe areas.
Sources reviewed: 2026-10-27
References
- MDN Web Docs. (n.d.-a). <textarea>: The textarea element. Multi-line input element.
- MDN Web Docs. (n.d.-b). enterkeyhint. Labeling the Enter key.
- Android Developers. (n.d.). Control and animate the software keyboard. Keyboard insets and animation.
- Apple. (n.d.). Virtual keyboards. Human Interface Guidelines. Keyboard types and return key.
- Reyal, S., Zhai, S., & Kristensson, P. O. (2015). Performance and user experience of touchscreen and gesture keyboards in a lab setting and in the wild. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (pp. 679–688). ACM. Touch keyboards in the wild.
- Ruan, S., Wobbrock, J. O., Liou, K., Ng, A., & Landay, J. A. (2018). Comparing speech and keyboard text entry for short messages in two languages on touchscreen phones. Proceedings of the ACM on Interactive, Mobile, Wearable and Ubiquitous Technologies, 1(4), Article 159. Speech vs keyboard speed.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Name/role and status messages.