# Field Status

## 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.

```vue
<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

- **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

A detached error and a detached success.

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

<template>
  <VStack :gap="4">
    <FieldStatus type="error" message="This field is required" variant="detached" />
    <FieldStatus type="success" message="Your changes have been saved" variant="detached" />
  </VStack>
</template>
```

## FieldStatus Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'error' \| 'warning' \| 'success'` | — | Required. Chooses the icon and the color. |
| `message` | `string` | — | Required. The text. An empty string renders nothing visible. |
| `variant` | `'attached' \| 'detached'` | `'attached'` | Attached overlaps the control above it. Detached is a separate block. |
| `isVisuallyHidden` | `boolean` | `false` | Keeps the message available without showing the box. |

The type `FieldStatusProps` is exported from `@astryx-vue/core/Field` together with `FieldStatusInput`.