UI 组件类型 · 单一组件 / Input
Input
接收用户输入,并提供焦点、错误和只读反馈。
Identity · 身份
- 子类型
- 单一组件
- 父级类目
- 表单与输入
What · 是什么
- 组成与状态
- Container、Label、Input Text、Placeholder、Helper Text、Validation Icon。
Why · 为什么
- 作用
- 接收用户输入,并提供焦点、错误和只读反馈。
Where · 在哪里
- 适用场景
- Web 界面设计、Default、Hover、Focused、Disabled、Read-only、Valid、Invalid、Loading、Busy、Small、Medium、Large、Compact
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Checkout / Order SummaryCheckout / Order Summary反向 · 应用于
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- Demo RequestDemo Request反向 · 应用于
收集最少需求并预约产品、服务或销售演示。
- Donation / FundraisingDonation / Fundraising反向 · 应用于
说明目标、进展和资金用途,并提供低摩擦的捐赠或支持入口。
- Event RegistrationEvent Registration反向 · 应用于
提供活动信息、报名字段、名额、费用和确认提醒。
- Interactive CalculatorInteractive Calculator反向 · 应用于
让用户输入假设并即时获得可解释的估算、比较或结果。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Login / AuthLogin / Auth反向 · 应用于
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Referral / InviteReferral / Invite反向 · 应用于
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Store LocatorStore Locator反向 · 应用于
让用户按位置、服务或库存查找最近的门店、机构或服务点。
- Survey / FeedbackSurvey / Feedback反向 · 应用于
以问卷、评分或开放反馈收集用户意见,并说明提交后的处理方式。
- Tool InputTool Input反向 · 应用于
让用户输入、配置或上传工具任务所需的信息。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 表单与输入Forms & Input属于
用于接收、选择、编辑、上传和校验用户输入的组件。
- Character CountCharacter Count反向 · 属于
显示当前字符数与限制的计数器
- Clear ButtonClear Button反向 · 属于
清空当前输入值的操作
- Error MessageError Message反向 · 属于
指出校验失败原因的错误文本
- Helper TextHelper Text反向 · 属于
解释输入要求或格式的辅助文本
- Input ControlInput Control反向 · 属于
接收和编辑单行文本的输入区域
- LabelLabel反向 · 属于
说明输入内容含义的标签
- PrefixPrefix反向 · 属于
显示在输入值前的单位或上下文内容
- SuffixSuffix反向 · 属于
显示在输入值后的单位或辅助操作
- BusyBusy应用于
组件正在处理任务,暂时不应接受重复操作的状态。
- CompactCompact应用于
减少间距以适配高密度工作台的变体。
- DefaultDefault应用于
默认状态,组件可被使用但没有额外交互反馈。
- DisabledDisabled应用于
组件暂时不可操作的状态。
- FocusedFocused应用于
键盘或其他输入方式当前定位到组件的状态。
- HoverHover应用于
指针悬停在可交互目标上的状态。
- InvalidInvalid应用于
当前输入不符合规则但用户仍可修正的状态。
- LargeLarge应用于
适合主要任务、触屏和强调场景的大尺寸变体。
- LoadingLoading应用于
组件正在等待异步结果的状态。
- MediumMedium应用于
适用于大多数场景的默认尺寸变体。
- Read-onlyRead-only应用于
用户可以查看但不能修改当前值的状态。
- SmallSmall应用于
适合紧凑空间和高密度任务的小尺寸变体。
- ValidValid应用于
当前输入或操作通过校验的状态。
- InputInput反向 · 应用于
收集单项文本、数值或格式化信息的基础表单控件。