Molecule
Field
Three atoms in one order, and the order is the component. 30 instances across 15 screens.
Label, control, hint. The label is never inside the control, the hint is never above the label, and the gap between them is one step of the scale so the three read as one thing rather than three.
Anatomy
dark, shipped
A reason is required
light, the pair
A reason is required
.fielda column with one step of gap. That is the whole declarationlabelits own atom, with afor. Not optional: measured at 31 labels against 30 fieldsinputits own atom, and it is one component forinput,textareaandselecthintits own atom, on 7 of the 30
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| control | textarea | 21 | carried by input, not by a modifier here |
| input | 9 | the same | |
| hint | present | 7 | presence rather than a modifier. A field asks for a hint when the constraint cannot be read off the label, and that is a fact about the question |
| absent | 23 | ||
| error | no values | 0 | The product has no error state on a field. The reject dialog holds its main action out of reach until a reason is given and says so in a hint. That is a defensible answer and it is not a drawn one. In backlog.md, and named on the input and hint pages as well |
It is the clearest molecule in the system. Three atoms, a direction and a gap, and everything a reader expects to find here is somewhere else on purpose: the box is input, the name is label, the constraint is hint, and each of them stands alone on other screens.
When to use it
Wherever the product has to collect something it cannot know. That is a short list on purpose: an adjudication console asks the analyst for almost nothing, because everything it needs it has already correlated.
Where she meets it. Only when she disagrees with Clerk. 21 of the 30 are one question, why you are rejecting, and design principle 3 is the reason: the reason goes straight into tuning, so the field is the part of the interface that teaches.
Rule and anti-rule
Do
Label above, control below, one step apart. Clicking the label focuses the control, which the browser does for free once the elements are right.
Do not
Why you are rejecting
Not with the name in the placeholder and not with the hint repeating it. The placeholder disappears when she starts typing, and a hint that repeats the label spends a line saying nothing.
States
It has none, and it is not interactive.
dark, shipped
A reason is required
light, the pair
A reason is required
The control inside it has hover and focus and carries them itself. The field draws no ring around the group, and it must not: a ring around three things says three things are focused.
What it reads, and where it stands
No colour role at all. Geometry only.