Skip to content
Course · Shipping AI interfaces

The composer is a form

A prompt input is a form field with delusions of grandeur — it needs a label, keyboard rules, disabled states, and an answer to 'what happens when I press Enter'.

Beginner1 min read (computed · recorded 3)updated 2026-09-14aiformscomposera11ycourse

by Motif Editors

revised 2026-09-14First publication in the bank-4 AI-interface curriculum.

Part 4 of 15 in Shipping AI interfacesThinking states that don't lieModel pickers users can trust

Key takeaways
  • The composer needs the same care as any form: a label, visible focus, and a stated submit gesture.
  • Enter sends, Shift+Enter inserts a newline — state the convention and make it work everywhere.
  • A disabled send button needs a reason the user can read.

The same anatomy as a login form

A composer has everything a form has: an input with a label (even a placeholder is a weak label), a submit affordance with enabled and disabled states, and keyboard behaviour that matches the user's expectation. The one twist is the newline: Enter sends, Shift+Enter writes a newline — and the convention must hold across desktop and mobile, where mobile keyboards may hide the modifier.

Disabled means 'why'

A send button that is greyed out with no explanation is a riddle. The honest composer either keeps the button active and explains the error on press, or prints the reason next to the disabled state — 'enter a prompt first', 'waiting for the previous answer'. The reason is the accessibility of the disabled state.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Prompt Input
📎 hero-copy.md

composer pattern only — sending is a local echo