Inline Message
FreeA compact, contextual message displayed directly beneath a form field or within a content section. Used for field-level validation feedback, helper text upgrades, and contextual warnings. Appears inline without displacing the layout. Supports info, success, warning, and error severity levels with matching icon and colour.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Info | Blue-toned inline message for supplementary context. | Use to provide additional guidance below a form field — "We'll use this to personalise your experience". |
| Success | Green-toned inline message confirming valid input. | Use for real-time validation confirmation — "Username is available". |
| Warning | Amber-toned inline message for non-blocking concerns. | Use to flag potential issues — "This email is already associated with another account". |
| Error | Red-toned inline message for validation failures. | Use for field-level validation errors — "Password must be at least 8 characters". |
Usage Guidelines
Position directly below the related form field with no gap.
Use for page-level or system-level messages — use Alert or Banner instead.
Associate the message with the field using aria-describedby.
Display multiple inline messages on the same field — show only the highest priority.
Use a severity icon alongside the text for colour-blind accessibility.
Use inline messages without associating them to a field — they lose context.
Keep messages to a single sentence with actionable guidance.
Code
<div class="lex-inline-message lex-inline-message--error"
id="email-error" role="alert">
<svg class="lex-inline-message__icon" aria-hidden="true">
....lex-inline-message {
display: flex;
align-items: flex-start;
gap: var(--lex-space-4);
...// Using Lexicon CSS classes with React
<InlineMessage severity="error" id="email-error">
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-inline-msg-bg | — | — | bg |
| --lex-inline-msg-border | — | — | border |
| --lex-inline-msg-text | — | — | text |
| --lex-inline-msg-radius | — | — | radius |
Accessibility
- Associate the message with its form field using aria-describedby on the input pointing to the message id.
- Use role="alert" for error messages so they are announced immediately.
- Icon must have aria-hidden="true" since the text conveys the meaning.
- When the message is removed, ensure the aria-describedby reference is also cleaned up.