Component

Text
entry.

Single-line inputs and multi-line textareas. The component most likely to break a course's flow — typing on a phone is hard, scoring free text is harder, and learners are quick to skip anything that asks them to think. Used well, they're the deepest reflection you can build in.

What they're for

Reflection and recall.

Text entry asks the learner to produce something rather than recognise it. It's the highest-effort interaction in eLearning, which is both its value and its risk — pay it off with content where the typing genuinely matters.

  • Reflection prompts ("What's one thing you'd take from this module?").
  • Short-answer questions with a defined correct response.
  • Form inputs for name, email, role — the basics.
  • Open-ended scenario responses where there's no fixed answer.
What they're not for

Tasks that can be done with a click.

Typing is expensive. If the learner could give the same answer by clicking a radio button or ticking a checkbox, use those instead. Reserve typing for moments where the act of writing adds value.

  • Multiple choice questions disguised as fill-in-the-blank.
  • Forced reflection mid-quiz where it interrupts assessment.
  • Anything on mobile where typing is a barrier to completion.
  • Inputs whose answers can never be scored or acted on.
Working examples

Single-line and multi-line.

Two common patterns: a single-line input for short answers, and a textarea with a character counter for reflection prompts. Both with clear labels, helper text, and validation feedback.

In one word, how would you describe your team's communication style?

One word. The act of choosing forces a real reflection.


What's one specific thing you'd try differently in your next 1:1 based on this module?

Your answer is saved as you type. There's no right answer — the value is in the noticing.

Note · The single-line example doesn't have a "correct" answer — most reflection inputs shouldn't. The textarea uses a max length to nudge concision; without it, learners either write nothing or way too much.

Design considerations

Get the visuals right.

01

Label every input

Every text input needs a visible label above or beside it. Placeholder text alone isn't a label — it disappears the moment the learner starts typing, and it's invisible to screen readers as a label. Use a real <label> element associated with the input.

02

Use helper text for expectations

"One word." "A sentence or two." "Full name as it appears on your ID." Helper text sets the expectation before the learner types, which prevents the awkward "did I write too much / too little?" moment. Place it directly below the input.

03

Show character counters where length matters

For inputs with a max length, show a live counter. It tells the learner they're approaching the limit and prevents the frustration of hitting it mid-sentence. Position it next to the label or right-aligned with the input.

04

Accessibility — describe-by, not just visible

Helper text and counter must be linked via aria-describedby. Screen reader users get nothing from text that's only visually adjacent to the input. The same applies to error messages — visible and announced.

05

Accessibility — visible focus

Tab to an input and the focus state needs to be obvious — a thicker border, a coloured ring, a shadow. The browser default "thin blue dotted line" is barely visible on most coloured backgrounds. Make it intentional.

06

Sensible defaults: autocorrect, autocapitalise

For long-form reflection: autocorrect on, autocapitalise sentences. For short technical fields (names, codes): autocorrect off, autocapitalise as appropriate. The defaults vary by browser and OS — set them explicitly with autocapitalize, autocorrect, and spellcheck.

UX best practice

How to use text entry deliberately.

Ask yourself: could this be a click?

If the answer could just as easily come from a radio button, a checkbox, or a toggle, use those instead. Typing is high-effort. Save it for moments where the act of writing — the searching for the right word, the construction of a sentence — is itself the value.

For reflection, don't score.

If the prompt is "What's one thing you'd try differently?", there's no right answer. Don't try to match the input against keywords. Don't show "well done" feedback. Don't gate progress on the response. The learner's answer is between them and themselves — your job is to create the prompt and step back.

For short answers, accept variation.

If the input is scoreable — a definition, a value, a code — accept reasonable variations. "Cardiopulmonary resuscitation" and "CPR" and "cpr" are the same answer. Trim whitespace. Ignore case. Treat synonyms as equivalent. Strict string matching frustrates learners who got it right but typed it slightly differently.

Set a length expectation.

"One word", "A sentence", "Two to three sentences", "Up to 100 words" — set the expectation in the helper text. Learners will calibrate. Without it, you'll get a mix of single-word responses and full essays, neither of which is what you wanted.

Save as the learner types.

If the course loses the learner's input on navigation away — a network blip, a tab close, a back button — they won't fill it in twice. Persist text inputs to local storage or to the LMS as the learner types. Losing reflection is worse than losing a quiz answer because the learner can't recover the moment.

Confirm receipt, don't praise.

"Thanks — your answer is saved" beats "Great work!" The learner doesn't know if their answer was great. False praise erodes trust. Confirmation that the system received the input is enough — the learner moves on with confidence.

Mobile: be honest with yourself.

Typing on a phone is genuinely hard. If your course will be taken primarily on mobile, every text entry is friction. Either move text inputs to optional positions in the course, switch to clickable patterns, or commit to the trade-off and acknowledge it in your completion metrics.

Real scenarios

When you'd reach for text entry.

01

Mid-course reflection

"What stood out to you in the last section?" — a textarea pause that prompts the learner to consolidate. Don't score. Don't gate. Just create the moment.

02

Defined-answer short questions

"What is the acronym for personal protective equipment?" — short, scoreable, accepts variations. Useful occasionally as variety alongside multiple choice questions.

03

Goal-setting at module start

"In one sentence, what do you want to be able to do by the end of this module?" Set at the start, returned to at the end as a self-check.

04

Form fields for course completion

Name, email, role for certificate generation. Simple, single-purpose, and the moment the typing is worth it because the output is a personalised certificate.

Want a course
built well?

We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.