基础组件

Input

Alune 月光主题下的输入框，直接保留 Ant Design 原有属性、类型与行为。

使用方式

输入框由宿主传入状态和回调，适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

import { Input } from '@alune/ui';

接入要求见快速开始，选择依据见交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

查看运行源码

源码文件

import { useState } from 'react';
import { Input } from '@alune/ui';

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <div className="example example--narrow">
      <label className="example-field">
        名称
        <Input
          aria-label="名称"
          placeholder="输入名称"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <label className="example-field">
        禁用状态
        <Input aria-label="禁用名称" disabled defaultValue="禁用" />
      </label>
      <label className="example-field">
        说明
        <Input.TextArea aria-label="说明" placeholder="多行说明" rows={3} />
      </label>
      <output className="example-status" aria-live="polite">
        当前输入：{value || '尚未填写'}
      </output>
    </div>
  );
}

API

直接转导出 Ant Design 的 Input，保留原始 Props、泛型、复合成员与回调语义。下表列出常用属性；类型取自当前安装版本，默认值沿用 Ant Design 6。

AluneUIProvider 统一主题与减少动效；宿主维护受控状态、校验和业务回调。

Input 完整 API 与默认值 ↗

Input

InputProps

属性 / 方法	类型	默认值	必填	说明
`value`	`ValueType`	`—`	否	受控输入值。
`defaultValue`	`string \| number \| readonly string[]`	`—`	否	非受控初始值。
`disabled`	`boolean`	`false`	否	禁用编辑。
`allowClear`	`boolean \| { clearIcon?: ReactNode; }`	`false`	否	显示清空操作。
`status`	`"" \| "error" \| "warning" \| "success" \| "validating"`	`—`	否	校验语义，配合可阅读的错误说明。
`onChange`	`ChangeEventHandler<HTMLInputElement, HTMLInputElement>`	`—`	否	输入变化事件，值从 event.target.value 读取。

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收