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>
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" class="p-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" class="p-invalid" />
<InlineMessage />
</div>
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.
Component does not include any interactive elements.