Input

Input 用于收集单行文本、邮箱、搜索、文件等原生 input 输入。组件在原生 <input> 外包了一层可聚焦样式容器，并提供前置插槽、后置插槽、清空按钮和统一尺寸。

import { Input } from '@skyroc/web-ui';

何时使用

• 需要收集单行文本、邮箱、搜索关键字、文件等原生 input 数据。
• 输入框需要前后图标或自定义操作区。
• 需要和项目主题尺寸、边框、聚焦态保持一致。
• 需要数字步进交互时使用 NumberInput；需要验证码分段输入时使用 InputOTP。

基础用法

Input 支持受控和非受控用法，常见原生 input 属性会透传到底层 <input>。

禁用

通过 disabled 禁用输入框。readOnly 也会让底层 input 进入不可编辑状态。

插槽

通过 leading 和 trailing 放置前置、后置内容，常用于搜索图标、单位、快捷操作等。

可清空

通过 clearable 显示清空按钮。清空按钮会在 hover 输入框容器时显示，并在点击后清空当前 DOM value。

尺寸

通过 size 调整输入框高度、字号、横向内边距和插槽间距，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 控制不同 slot：root、control、clearable 和 visible。如果只需要调整整体容器，优先使用 classNames.root；当前实现中 className 会作为多个 slot 的兜底 class 使用，不适合做精细化样式控制。

API

Input

通用属性参考：继承原生 input 属性，但移除了原生 size 属性，改用项目统一尺寸。

类型