UI 组件 L1 · 组件分类 / Forms & Input
表单与输入
用于接收、选择、编辑、上传和校验用户输入的组件。
Identity · 身份
- 子类型
- UI 组件分类
- 层级
- L1 · UI 组件分类
What · 是什么
- 定义
- 用于接收、选择、编辑、上传和校验用户输入的组件。
- 分类
- 已验证
Why · 为什么
- 核心问题
- 用户如何输入、修改和确认信息?
Lifecycle · 生命周期
- 状态
- 已验证
包含 UI 组件类型(L2)
关系来自本地关系表,并包含反向关联。
- AutocompleteAutocomplete反向 · 属于
Autocomplete 如何在界面中被理解、操作或组合?
- CheckboxCheckbox反向 · 属于
Checkbox 如何在界面中被理解、操作或组合?
- Code InputCode Input反向 · 属于
Code Input 如何在界面中被理解、操作或组合?
- Color AreaColor Area反向 · 属于
在二维色彩空间中选择饱和度、明度或色调。
- Color FieldColor Field反向 · 属于
输入或编辑颜色值的单一字段。
- Color InputColor Input反向 · 属于
Color Input 如何在界面中被理解、操作或组合?
- Color SliderColor Slider反向 · 属于
沿一维色带选择色相、透明度或其他颜色通道。
- ComboboxCombobox反向 · 属于
Combobox 如何在界面中被理解、操作或组合?
- Currency InputCurrency Input反向 · 属于
输入金额并显示货币和数值格式的字段。
- Date FieldDate Field反向 · 属于
由日期分段或单一文本组成的日期输入控件。
- Date InputDate Input反向 · 属于
Date Input 如何在界面中被理解、操作或组合?
- Date SegmentDate Segment反向 · 属于
日期字段中的年、月、日等可独立编辑的分段。
- Email InputEmail Input反向 · 属于
输入并验证电子邮件地址的字段。
- File InputFile Input反向 · 属于
File Input 如何在界面中被理解、操作或组合?
- File TriggerFile Trigger反向 · 属于
触发系统文件选择器但不承担完整上传流程的控件。
- InputInput反向 · 属于
接收用户输入,并提供焦点、错误和只读反馈。
- LabelLabel反向 · 属于
Label 如何在界面中被理解、操作或组合?
- Number InputNumber Input反向 · 属于
Number Input 如何在界面中被理解、操作或组合?
- OTP InputOTP Input反向 · 属于
OTP Input 如何在界面中被理解、操作或组合?
- Password InputPassword Input反向 · 属于
Password Input 如何在界面中被理解、操作或组合?
- Password Visibility TogglePassword Visibility Toggle反向 · 属于
切换密码字段可见性的单一控制。
- Quantity InputQuantity Input反向 · 属于
输入商品或资源数量的数字字段。
- RadioRadio反向 · 属于
Radio 如何在界面中被理解、操作或组合?
- Range SliderRange Slider反向 · 属于
Range Slider 如何在界面中被理解、操作或组合?
- SearchboxSearchbox反向 · 属于
Searchbox 如何在界面中被理解、操作或组合?
- SelectSelect反向 · 属于
Select 如何在界面中被理解、操作或组合?
- SliderSlider反向 · 属于
Slider 如何在界面中被理解、操作或组合?
- SwitchSwitch反向 · 属于
Switch 如何在界面中被理解、操作或组合?
- Tag InputTag Input反向 · 属于
Tag Input 如何在界面中被理解、操作或组合?
- Tel InputTel Input反向 · 属于
输入电话号码并适配地区、键盘和格式化规则的字段。
- Text FieldText Field反向 · 属于
提供文本输入、名称、帮助和验证语义的基础字段单元。
- TextareaTextarea反向 · 属于
Textarea 如何在界面中被理解、操作或组合?
- Time FieldTime Field反向 · 属于
由时间分段或单一文本组成的时间输入控件。
- Time InputTime Input反向 · 属于
Time Input 如何在界面中被理解、操作或组合?
- Time SegmentTime Segment反向 · 属于
时间字段中的时、分、秒和周期等可独立编辑的分段。
- URL InputURL Input反向 · 属于
输入并验证 URL 的字段。
- CascaderCascader反向 · 属于
按层级逐步选择国家、分类、目录或其他树状选项。
- Checkbox GroupCheckbox Group反向 · 属于
组织多个可多选选项并呈现组级语义的结构
- Code EditorCode Editor反向 · 属于
编辑代码、配置或结构化文本的编辑器
- Color PickerColor Picker反向 · 属于
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment Composer反向 · 属于
提供评论、回复、提及、附件和提交动作的编辑器。
- Date PickerDate Picker反向 · 属于
通过输入和日历面板选择日期的组合控件
- Date Range CalendarDate Range Calendar反向 · 属于
在日历视图中选择、预览和修改日期范围。
- Date Range PickerDate Range Picker反向 · 属于
选择起始日期和结束日期的组合控件
- Field GroupField Group反向 · 属于
将语义相关的表单控件组织成一个输入组
- File Drop AreaFile Drop Area反向 · 属于
提供拖拽、选择、预览和移除文件的上传入口。
- File UploaderFile Uploader反向 · 属于
选择、上传、校验并管理文件的组合控件
- Filter PanelFilter Panel反向 · 属于
在面板中组织复杂筛选条件、应用和清除操作
- FormForm反向 · 属于
组织多个输入、校验、提交和结果反馈的任务组件。
- Form FieldForm Field反向 · 属于
把 Label、Input、辅助说明和错误反馈组合成可理解的输入单元。
- Mention InputMention Input反向 · 属于
在文本编辑过程中搜索并插入用户、团队或对象提及。
- Multi-selectMulti-select反向 · 属于
支持从选项集合中选择多个值的组合控件
- Query BuilderQuery Builder反向 · 属于
用字段、运算符和值构造可保存或复用的结构化查询。
- Radio GroupRadio Group反向 · 属于
组织一组互斥选项并管理组级选择的结构
- Rich Text EditorRich Text Editor反向 · 属于
编辑带有格式、结构和嵌入内容的富文本区域
- Rich Text FieldRich Text Field反向 · 属于
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Search & Filter BarSearch & Filter Bar反向 · 属于
组合搜索、筛选、排序和清除操作的工具条
- Search FieldSearch Field反向 · 属于
提供搜索输入、提交和清除操作。
- Tag PickerTag Picker反向 · 属于
搜索、创建和移除多个标签的字段组合。
- Time PickerTime Picker反向 · 属于
通过输入和候选列表选择时间的组合控件
- Time Range PickerTime Range Picker反向 · 属于
选择开始与结束时间并处理跨日、时区和步长。
- Transfer ListTransfer List反向 · 属于
在两个列表之间移动、搜索和排序可选对象。
- Tree SelectTree Select反向 · 属于
从层级选项树中选择一个或多个值的组合控件
- Upload QueueUpload Queue反向 · 属于
管理多文件上传的队列、进度、错误、重试和取消。