Skip to content

NbMessage displays contextual feedback below (or inside) a form field: errors, warnings, successes, or helper hints. It pairs naturally with NbTextInput, NbSelect, and other form controls, but can also be used standalone anywhere feedback text is needed.

vue
<template>
  <NbMessage variant="error">This field is required.</NbMessage>
  <NbMessage variant="warning">Value exceeds limit.</NbMessage>
  <NbMessage variant="success">Username is available.</NbMessage>
  <NbMessage variant="helper">Use dot-separated notation.</NbMessage>
</template>

Icon-only mode ​

When icon-only is set, the text is hidden and reappears as a tooltip on hover. This is how NbTextInput uses NbMessage in the fluid variant to keep the field compact.

vue
<template>
  <NbMessage variant="error" icon-only>This field is required.</NbMessage>
</template>

Props ​

PropTypeDefaultDescription
variant'error' | 'warning' | 'success' | 'helper''helper'Controls color and icon
iconOnlybooleanfalseShows only the icon; text visible on hover via tooltip

Slots ​

SlotDescription
defaultThe message text (shown or in tooltip)

Icon mapping ​

VariantIconColor
errorwarning-circle--nb-c-danger
warningwarning--nb-c-warning
successcheck-circle--nb-c-success
helperinfo--nb-c-text-subtle

Accessibility ​

  • Root element has role="status".
  • Errors use aria-live="assertive"; warnings, successes and helpers use aria-live="polite".
  • The tooltip in iconOnly mode is aria-hidden; ensure error state is also communicated via the input's aria-describedby or aria-invalid.