Home / Snippets / UI Components /
Inline message
Inline feedback messages for forms and UI states — error, success, warning, and info variants.
Quick implementation
/* HTML:
*/
.inline-message {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.65rem;
font-size: 0.8rem;
border-radius: 0.5rem;
margin-top: 0.35rem;
}
.inline-message--error {
color: oklch(0.5 0.18 25 / 0.95);
background: oklch(0.92 0.04 25 / 0.35);
}
.inline-message--success {
color: oklch(0.55 0.16 150 / 0.95);
background: oklch(0.92 0.03 150 / 0.35);
}
.inline-message--warning {
color: oklch(0.6 0.16 75 / 0.95);
background: oklch(0.93 0.04 75 / 0.35);
}
.inline-message--info {
color: oklch(0.6 0.18 240 / 0.95);
background: oklch(0.92 0.04 240 / 0.35);
}
/* Optional: style the associated input */
input.error {
border-color: oklch(0.6 0.18 25 / 0.8);
}
input.success {
border-color: oklch(0.7 0.18 150 / 0.9);
}Prompt this to your LLM
Crafted prompt — includes role, intent, constraints, framework variant, and edge cases to handle.
You are a senior frontend engineer specializing in accessible form patterns.
Goal: Build an inline message component for form feedback — error, success, warning, and info variants.
Technical constraints:
- Use CSS-only styling with a class-based approach (.inline-message, .inline-message--error, etc.).
- Use oklch() for all colors — no hex, no rgba().
- Include a subtle background color with low alpha for each variant.
- Text color should be high-contrast within each variant's background.
- Add a small icon (SVG) that can be included or omitted via a utility class.
Framework variant (pick one):
A) Vanilla HTML + CSS only — return the component classes and an example of how to pair it with an input field.
B) React component — accept `variant` (error|success|warning|info), `children`, `className`, `icon` props; include the CSS as a CSS module.
Edge cases to handle:
- Provide a focus state style when the message is associated with a focused input.
- Mention ARIA roles: role="alert" for errors, role="status" for success/info.
- Handle reduced-motion: no animations, just static styles.
Return the HTML structure and the CSS, clearly separated.Why this matters in 2026
Inline messages have replaced generic toast notifications for form-level feedback. Users expect to see validation errors right next to the field they're editing, not at the top of the page. CSS handles the entire visual layer — color coding, spacing, icons — while the browser's accessibility tree (via aria-describedby and role) ensures screen readers announce the right message at the right time.
The logic
Each variant uses oklch() to create perceptually consistent colors. The error variant leans red (oklch(0.5 0.18 25 / 0.95)), success leans green (oklch(0.55 0.16 150 / 0.95)), and so on. The background uses the same hue at much lower saturation and higher lightness, creating a cohesive color relationship. A small SVG icon reinforces the message type visually without adding semantic weight.
aria-describedby on the input and the appropriate role (alert for errors, status for success/info) to ensure screen readers announce it.Accessibility & performance
Use role="alert" for error messages (assertive, interrupts) and role="status" for success/info (polite, non-interrupting). The aria-describedby attribute on the input links it to the message element, so screen readers announce the message when the field receives focus. For performance, keep the icon as an inline SVG — no extra HTTP requests, and it scales without pixelation. No animations means no reduced-motion concerns.