InlineMessage

InlineMessage displays a short, contextual message next to the content it relates to, such as a validation error below a form input. Setting a status adds a matching icon and colour, so the message is not conveyed by colour alone.

Field, InlineField, Fieldset and Checkbox already render InlineMessage for their fieldMessage, and link it to the input for you. Use InlineMessage directly only when you need a message outside those components.

View in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { InlineMessage } from '@adaptavant/eds-core';
Added
1.34.0

Basic Usage​

Pass the message as children. Without a status, the message renders as neutral secondary text with no icon.

<InlineMessage>Your changes are saved automatically.</InlineMessage>
View in Playroom

Status​

Use the status prop to show an error or warning message. Each status sets its own icon and colour.

<Stack className="gap-2">
  <InlineMessage status="error">
    Enter an email address in the correct format, like name@example.com
  </InlineMessage>
  <InlineMessage status="warning">
    This email is already linked to another account
  </InlineMessage>
</Stack>
View in Playroom

Size​

Use the size prop to match the message to the surrounding content. standard is the default; use large alongside large fields.

<Stack className="gap-2">
  <InlineMessage size="standard" status="error">
    Standard error message
  </InlineMessage>
  <InlineMessage size="large" status="error">
    Large error message
  </InlineMessage>
</Stack>
View in Playroom

Disabled​

Set isDisabled when the related content is disabled. The text and icon use the disabled colour, whatever the status.

<InlineMessage isDisabled status="error">
  This field is required
</InlineMessage>
View in Playroom

Announce on mount​

By default, shouldAnnounceOnMount is true and InlineMessage renders with role="alert", so screen readers announce the message as soon as it appears. This suits messages that show up in response to a user action, such as validation after submitting a form.

Set shouldAnnounceOnMount to false for messages that are present when the page first loads, or that are already linked to an input through aria-describedby. Otherwise the message may be announced unexpectedly or twice.

When linking a message to an input, pass an id to InlineMessage and reference it from the input's aria-describedby.

​
Enter an email address in the correct format, like name@example.com
<Stack className="gap-1">
  <input aria-describedby="email-message" aria-label="Email" type="email" />
  <InlineMessage id="email-message" shouldAnnounceOnMount={false} status="error">
    Enter an email address in the correct format, like name@example.com
  </InlineMessage>
</Stack>
View in Playroom

API Reference​

InlineMessage

PropDefaultDescription
children_ReactNode
The message to display.
status?_'error' | 'warning'
The status of the message. Determines the icon and colour. When not set, no icon is shown.
size?'standard''standard' | 'large'
The size of the message text and icon.
isDisabled?falseboolean
When true, the text and icon use disabled styling.
shouldAnnounceOnMount?trueboolean
Adds role="alert" when true, so screen readers announce the message when it is first rendered.
id?_string
Unique identifier applied to the message text. Use it to link the message to an input with aria-describedby.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

InlineMessage parts​

<InlineMessage
  className="bg-critical-secondary rounded-lg px-2 py-1"
  classNames={{
    icon: 'fill-critical',
    message: 'font-strong',
  }}
  status="error"
>
  This field is required
</InlineMessage>
View in Playroom
Stylable PartsDescription
rootThe outermost container of the InlineMessage component.
iconThe status icon shown before the message.
messageThe text that displays the message.