Skip to main content

Styling Forms and Validation Messages

Form styling should make labels, controls, instructions and errors easy to identify.

.form-group {
  display: grid;
  gap: 0.35rem;
  margin-block: 1rem;
}

input,
select,
button {
  font: inherit;
  min-height: 2.75rem;
}

input {
  border: 1px solid #64748b;
  border-radius: 0.25rem;
  padding: 0.6rem;
}

input:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

.error {
  color: #8a1c1c;
  border-left: 4px solid #b42318;
  padding: 0.75rem;
}

Do not rely on placeholder text as the label. Keep validation messages near the relevant control and provide a summary for multiple errors.

Check

  • Every control retains a visible label.
  • Focus and error states are distinct.
  • Buttons look actionable.
  • Messages remain understandable without colour.
  • Keyboard navigation follows a logical order.
Back to top