Usage

FieldStatus is the message already used inside Field. Import it on its own when a custom control needs the same error, warning, or success treatment.

<script setup lang="ts">
import { FieldStatus } from '@astryx-vue/core/FieldStatus'
</script>

<template>
  <FieldStatus type="error" message="This field is required" variant="detached" />
</template>

attached tucks the message under a bordered control. detached is a separate block, which is what a standalone message should use. An error is announced assertively. Warning and success are polite. The component does not invent new behavior beyond Field.

Anatomy

Element	Description
Message box	Painted container for the validation feedback.
Detached icon	Leading status glyph shown only by the detached variant.
Message text	Text describing the validation status.

Best practices

Guideline	Practice
Do	Use detached when the message is not attached to an input shell.
Don't	Build a second status style. This is the one the fields already use.

Examples

Basic

This field is required

Your changes have been saved

A detached error and a detached success.