表单项

表单项外壳，为任意表单控件提供标签、右上角附加内容、帮助文字和错误信息。

交互预览

四个参数都不传时，FieldItem 不渲染外壳，直接返回子元素。

邮箱

用于接收通知

参数

label: 标签，显示在控件上方; string
help: 帮助文字，显示在控件下方; string
error: 字符串时在控件下方显示错误信息；FieldItem 不会改子控件状态，需自行给控件传 invalid; boolean | string
extra: 标签右侧的附加内容，如链接或操作按钮; ReactNode

示例

包裹 Input 等表单控件。FieldItem 只负责展示，错误态需给控件传 invalid。

邮箱

用于接收通知

邮箱

忘记邮箱？

邮箱格式不正确

使用说明

基础用法

Demo.tsx

import { FieldItem, Input } from '@apeiron/ui';

export function Demo() {
  return (
    <FieldItem label="邮箱" help="用于接收通知">
      <Input placeholder="name@company.com" />
    </FieldItem>
  );
}

错误信息

FieldItem 只负责展示错误文字，控件的错误态需要单独传 invalid。

Demo.tsx

<FieldItem label="邮箱" error="邮箱格式不正确">
  <Input invalid defaultValue="hello@" />
</FieldItem>

附加内容

extra 显示在标签右侧。

Demo.tsx

<FieldItem label="密码" extra={<a href="/forgot">忘记密码？</a>}>
  <Input type="password" />
</FieldItem>

输入框

文字提示