# FieldStatus

- Page: https://jiguang132.com/resources/astryx/docs/field-status
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

FieldStatus renders validation feedback for fields and field-like controls. Use it directly for custom controls that need the same error, warning, or success presentation as Field.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Field Status

FieldStatus renders validation feedback for fields and field-like controls. Use it directly for custom controls that need the same error, warning, or success presentation as Field.

| Prop | Type | Default | Description |
|---|---|---|---|
| type * | 'error' \| 'warning' \| 'success' |  | Status type. |
| message * | string |  | Status message text. |
| id | string |  | ID for aria-describedby association. |
| variant | 'attached' \| 'detached' | 'attached' | Visual variant: attached overlaps the input, detached floats below. |

### Usage guidance

- Use attached status below bordered inputs when the message belongs to that input.
- Use detached status for controls like checkboxes, switches, and custom controls where overlap would be visually awkward.
- Avoid: Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-field-status",
      "visualProps": [
        "type",
        "variant"
      ]
    },
    {
      "className": "astryx-field-status-icon",
      "visualProps": [
        "type"
      ]
    }
  ]
}
```

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


## Examples

- Field Status: Field status messages in error, warning, and success states with attached and detached variants.
- FieldStatus — Basic: Detached error and success messages for validation feedback. Use below checkboxes, switches, or custom controls where an attached status would overlap.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt