InlineMessage

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">Warning 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">
    <label for="username" class="p-sr-only">Username</label>
    <InputText id="username" placeholder="Username" invalid />
    <InlineMessage>Username is required</InlineMessage>
</div>
<div class="flex flex-wrap align-items-center gap-2">
    <label for="email" class="p-sr-only">email</label>
    <InputText id="email" placeholder="Email" invalid />
    <InlineMessage />
</div>

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.