ElyriInput
输入框：三档尺寸，支持校验失败态，其余属性透传给原生 input。
安装
添加组件
pnpm dlx @elyri/cli@latest add input示例
基础用法
默认的输入框，仅需一个 placeholder。
import { Input } from './components/elyri/Input';
export function Example() {
return <Input placeholder="you@example.com" />;
}尺寸
三档尺寸：sm / md / lg。
import { Input } from './components/elyri/Input';
export function Example() {
return (
<div className="demo-ui-row">
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
</div>
);
}校验失败
Field 的 invalid 驱动红框，Message 展示错误文案。
Enter a valid email address.
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field invalid>
<Field.Label>Email</Field.Label>
<Input placeholder="you@example.com" defaultValue="hello@elyri.dev" />
<Field.Message>Enter a valid email address.</Field.Message>
</Field>
);
}禁用
Field 的 disabled 下发给控件，标签同步变灰。
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field disabled>
<Field.Label>Email</Field.Label>
<Input placeholder="Not available" />
</Field>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 控件尺寸：sm / md / lg |
invalid | boolean | false | 校验失败态：红框并标记 aria-invalid |
...rest | InputHTMLAttributes | — | 其余属性透传给原生 input |