FieldStatus

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

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.

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

{
  "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.