Inputs, labels, and validation
A polished form combines visual styling with native semantics. Use a real <label> connected to the input, a suitable input type, and clear helper or error text. Tailwind can style focus, invalid, disabled, and placeholder states, but it does not validate business rules or announce errors by itself.
Do not rely on placeholder text as the only label: it disappears when users type and may have poor contrast. Provide a visible label and make required fields and error messages clear.
Accessible input pattern
<div>
<label for="task-title" class="block text-sm font-medium text-slate-800">Task title</label>
<input id="task-title" name="title" required minlength="3"
aria-describedby="task-title-help"
class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-slate-900 placeholder:text-slate-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
placeholder="e.g. Review pull request">
<p id="task-title-help" class="mt-1.5 text-sm text-slate-600">Use at least three characters.</p>
</div>đź’ˇ The
for and id connect the label to the input. Native required and minlength constraints provide baseline validation. In a full form, connect any error text and update it when validation runs.Knowledge Check
Why should an input have a programmatically associated label?