Input Types & Pickers
A booking form asks whether you want a single or a double room. The answer sits inside a dropdown. Choosing it takes a tap to open, a look, a tap to choose, and a glance to check what got selected.
The right input saves every user a few seconds. Learn them all on the go.
Listen to the full Input Types & Pickers course on DesignPath
Two radio buttons would have shown both answers at once and taken one tap. The same form asks for a check-in date as free text. Back come "March 3", "3/3", "03.03.25" and "next Tuesday", of which the database wants exactly one.
Neither is a bug. Both come from the two defaults designers reach for without thinking, a text box for anything open and a dropdown for anything with options. The control decides how many taps an answer costs and which keyboard opens on a phone. It also decides whether the browser can fill the field in, and whether the format can be wrong at all. Most of what gets patched later with error messages was decided at this point.
Anatomy of a Form Field
A field looks like a box with a word above it. There are seven parts, and most design files carry three of them.
The Seven Parts
Three are always drawn, and four are usually inherited.
The label, naming what is being asked. The control itself, whatever type it is. The value, meaning what is in it. Then the four that go missing. The hint, showing the shape of a valid answer. The optional or required marker. The error slot, which is space the layout holds whether or not an error is showing. And the help, for anything needing a sentence rather than a hint.
A field drawn without an error slot moves the whole form down when the message appears, which is why the button somebody was about to press ends up somewhere else.
The Families of Control
Eight families cover almost every question a form asks.
A text input, for anything typed. A select, for one of a known list. Radio buttons, for one of a few visible options. Checkboxes, for any number of them. A stepper or number input, for a quantity. A slider, for an imprecise value in a range. A combobox, which is a text input with a filtered list attached. And the specialized pickers for dates, times, colors and files.
Choosing between them is the next article, and the point here is that the list is short. Most arguments about a field are an argument about which of eight things it is.
Three States, and the Fourth Nobody Draws
Every control carries the same set.
Empty, filled, and focused are the three in the file. The fourth is invalid, which needs the error slot, a marker on the control, and a message that says which field. Hidden vs Disabled covers the other states a control can be in, including read-only and disabled, which are a separate question from these.
What the Parts Are Answering
Each piece answers something somebody would otherwise have to guess.
What are you asking, answered by the label. How do I answer it, answered by the control and the hint. Do I have to, answered by the marker. What went wrong, answered by the error. A field showing a label and a box has answered one of the four and left the rest to the person filling it in.
Pro tip: Take the longest form in your product and count how many of its fields have a hint. The ratio is usually near zero, and the fields that need one are exactly the ones support gets asked about.