Forms & Input
Input Field
An input field is the element where a user types a value directly, such as a name or email, made up of a label, an input area, and helper text.
Definition
An input field is where a user types a value directly, like their name or email. On the surface it looks like a single boxed slot, but it actually works as a set: a label that says what the slot is for, the input area that receives the value, and helper or error text that explains the expected format or points out mistakes. An input field also moves between several states — the resting default state before anyone touches it, the focus state once the cursor is inside, the error state when the value is wrong, and the disabled state when it can't be edited. The border color or background should shift a little with each of those states, so the user can see at a glance what is happening in the slot right now.
Why does it matter?
The input field is where users bump into your form most often. If even one thing here is confusing, people hesitate over what to type and how, and an important flow like sign-up or checkout stalls right there. When the label is clear and the state is obvious, users fill things in with confidence instead. Getting the error state right matters especially: it can tell people exactly what went wrong and why, so they don't wear themselves out repeating the same mistake. Input fields are also the most numerous element in a form, so the label position and spacing rules you settle on here shape the impression of the whole screen. In the end the polish of your input fields decides the success rate of the entire form, which makes them one of the elements most worth fussing over.
Common mistakes
- Dropping the label and leaning on the placeholder alone. The placeholder disappears the moment someone starts typing, so halfway through filling the slot they forget what it was even for. It's safer to keep the label always visible, pinned above or beside the field.
- Building only the default look and never designing the focus, error, or disabled states. If a wrong value shows no sign of being wrong, users have no way to know what they broke, so they keep circling the same screen and eventually give up.
- Failing to mark which fields are required and which are optional. When people don't know how far they must fill things in, they agonize over slots they could have skipped, or leave a required slot empty and hit an error on submit.
Practical tips
- Design all four states — default, focus, error, and disabled — from the very start. Keep the label always visible and treat the placeholder as a supporting hint, like a sample value, so it's never unclear what the slot is for in any state.
- Put the error message right below the field and say specifically what went wrong and why. Instead of a bare 'invalid value,' something like 'your email is missing an @' lets the user fix it immediately.
- Match the keyboard type and input format to the nature of the field. A numeric keypad for a number slot, or a keyboard with an @ for an email slot, makes typing noticeably easier on mobile.
Ask your AI
In the input field code I'm pasting below, take what's currently just a single default state and build out all four states — default, focus, error, and disabled. Make the border color or background shift noticeably between states so it's obvious at a glance what's happening in the field, and keep the label always visible, pinned above or beside the field in every state. Give me the CSS for each state (:focus, :disabled, an error class, etc.) plus the color values laid out in a per-state table.
In the form code below, find the input fields that rely on the placeholder alone for guidance and add a visible label pinned above or beside each one. Since the placeholder vanishes the moment someone starts typing, don't let it stand in for the label — keep it only as a sample hint like '[sample value — e.g. [email protected]]'. Then clearly separate required from optional fields, marking required ones with a * or '(required)' and optional ones with '(optional)' in the label. Summarize the new labels and required markers mapped against the original placeholders in a table.
For the input fields I'm pasting below, put the error message right underneath the field and, instead of a vague 'invalid value', spell out exactly what's wrong and why — like 'your email is missing an @'. Then match the mobile keyboard to each field's nature by setting type and inputmode: inputmode="numeric" for number fields, type="email" for email, type="tel" for phone, and so on. The fields to cover are [field list — e.g. email, phone, card number]. Give me a table of the error copy and keyboard attributes you set per field.