字段状态 · FieldStatus

字段状态用于表单输入场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

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

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

字段状态 · 综合展示 / 状态 1：首先体验这个示例，再查看代码理解组件的组合方式。
字段状态 · 基础用法 / 状态 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

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.

属性	类型	默认值	说明
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.

使用建议

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.
避免：Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.

主题 API

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

组件结构

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.