ErrorMessage

A low-level error message component for displaying errors in non-form components.

Import

import { ErrorMessage } from '@heroui-vue/vue'

Usage

ErrorMessage is designed for collection-style components such as TagGroup, Calendar, and similar non-form contexts.

Required Categories

NewsTravelGamingShopping

Select at least one category

Please select at least one category

<template>
  <div class="demo-error-message-basic">
    <TagGroup
      v-model:selected-keys="selectedKeys"
      label="Required Categories"
      selection-mode="multiple"
      :is-invalid="isInvalid"
    >
      <Tag value="news">News</Tag>
      <Tag value="travel">Travel</Tag>
      <Tag value="gaming">Gaming</Tag>
      <Tag value="shopping">Shopping</Tag>
    </TagGroup>
    <Description>Select at least one category</Description>
    <ErrorMessage v-if="isInvalid">Please select at least one category</ErrorMessage>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Description, ErrorMessage, Tag, TagGroup } from '@heroui-vue/vue'

const selectedKeys = ref<Array<string | number>>([])
const isInvalid = computed(() => selectedKeys.value.length === 0)
</script>

<style lang="less">
.demo-error-message-basic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
</style>

Anatomy

<TagGroup>
  <Tag />
  <Description />
  <ErrorMessage />
</TagGroup>

When To Use

Use ErrorMessage for non-form components. For form fields, prefer Field Error, which is tied to field validation behavior.

ErrorMessage vs FieldError

Component	Use Case	Form Integration
ErrorMessage	Non-form components	No
FieldError	Form fields	Yes

Styling

The component uses the .error-message class from @heroui-vue/styles.

API

Prop	Type	Default	Description
class	string	undefined	Additional CSS classes