ElyriField
表单域：统一 label / 控件 / 描述 / 错误信息的排版与 aria 关联，校验逻辑完全由外部驱动。
安装
添加组件
pnpm dlx @elyri/cli@latest add field示例
基础用法
Label 自动关联控件，Description 补充说明。
展示在仓库首页与侧边栏。
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field>
<Field.Label>项目名称</Field.Label>
<Input placeholder="elyri-ui" />
<Field.Description>展示在仓库首页与侧边栏。</Field.Description>
</Field>
);
}校验失败
invalid 驱动红框与 aria-invalid，Message 条件渲染错误文案。
我们不会公开你的邮箱。
import { useState } from 'react';
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
const [value, setValue] = useState('');
const invalid = value !== '' && !value.includes('@');
return (
<Field invalid={invalid}>
<Field.Label>邮箱</Field.Label>
<Input value={value} onChange={(event) => setValue(event.target.value)} placeholder="you@example.com" />
<Field.Description>我们不会公开你的邮箱。</Field.Description>
{invalid && <Field.Message>请输入包含 @ 的邮箱地址。</Field.Message>}
</Field>
);
}承载各类控件
Input / Textarea / Select / RadioGroup 都能自动接入关联。
Pick one
import { Field } from './components/elyri/Field';
import { RadioGroup } from './components/elyri/Radio';
import { Select } from './components/elyri/Select';
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return (
<div>
<Field required>
<Field.Label>水果</Field.Label>
<Select placeholder="Pick one">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
</Select.Content>
</Select>
</Field>
<Field>
<Field.Label>备注</Field.Label>
<Textarea placeholder="可选" />
</Field>
<Field>
<Field.Label>尺寸偏好</Field.Label>
<RadioGroup defaultValue="md">
<RadioGroup.Radio value="sm">小</RadioGroup.Radio>
<RadioGroup.Radio value="md">中</RadioGroup.Radio>
</RadioGroup>
</Field>
</div>
);
}整域禁用
Field 的 disabled 会下发给未显式设置禁用的控件。
整域禁用时标签与描述同步变灰。
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field disabled>
<Field.Label>项目名称</Field.Label>
<Input placeholder="不可编辑" />
<Field.Description>整域禁用时标签与描述同步变灰。</Field.Description>
</Field>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
invalid | boolean | false | 校验失败态：控件红框 + aria-invalid |
required | boolean | — | 必填态：无原生 required 的控件（如 Select）标记 aria-required |
disabled | boolean | — | 禁用态：下发给未显式设置的控件 |
Field.Label | label 元素 | — | 标签：htmlFor 自动指向控件 |
Field.Description | p 元素 | — | 描述文案：注册进 aria-describedby |
Field.Message | p 元素 | — | 错误信息：建议配合 invalid 条件渲染，注册进 aria-describedby |