DesignDojo
1.2-components · 14-text-input

Estimated time: 6 min

Text input anatomy

When to Use

  • Short structured entries like name, email, and title.
  • Search fields with direct text entry behavior.
  • Inline edits where users update a single value.

When NOT to Use

Keep labels persistent above the field so users never lose context while typing.

For fixed choices from a list, use Select instead of free text input.

Variants

Default + focus
Error + helper
Disabled + read-only

Confused?

Use Text Input for open text entry, and use Checkbox for true/false choices.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Build a text input field with label, helper text, error message, and focus ring states that meet accessibility contrast requirements.

Pencil Prompt

Design labeled text input examples for default, focused, and error states with clear spacing between label, field, and feedback text.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Select