Inline Message component displays information related to another element such as invalid input.

import InlineMessage from 'primevue/inlinemessage';

InlineMessage component requires a content to display.

<InlineMessage severity="info">Username is required</InlineMessage>

The severity option specifies the type of the message.

<InlineMessage severity="success">Success Message</InlineMessage>
<InlineMessage severity="info">Info Message</InlineMessage>
<InlineMessage severity="warn">Warn Message</InlineMessage>
<InlineMessage severity="error">Error Message</InlineMessage>
<InlineMessage severity="secondary">Secondary Message</InlineMessage>
<InlineMessage severity="contrast">Contrast Message</InlineMessage>

Message component is handy when displaying error messages next to form elements.

<div class="flex flex-wrap align-items-center mb-3 gap-2">
    <InputText placeholder="Username" aria-label="username" invalid />
    <InlineMessage>Username is required</InlineMessage>
<div class="flex flex-wrap align-items-center gap-2">
    <InputText placeholder="Email" aria-label="email" invalid />
    <InlineMessage />

Screen Reader

InlineMessage component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well.

Keyboard Support

Component does not include any interactive elements.