Input Field
TextField / TextArea / SelectOption / Datepicker / MediaUpload / FileUpload / Selection Control / Icon Selector。
Text Field - States
5 种状态:idle / focus / filled / disabled / error。3 色 × 2 shape(rounded / pill)。
Color: purple (rounded)
Color: blue (rounded)
Color: black (rounded)
Color: purple (pill)
Color: blue (pill)
Color: black (pill)
Text Field - With Icon
左图标 / 右图标 / 后缀单位 / 搜索框。
Icon variants
Text Field - With Label
带 label 的输入框,可加 headerAction(帮助链接等)。
Inside Label
Text Field + Select Suffix
输入 + 尾部下拉,常用于币种/单位切换。Suffix 组件挂在 TextField 的 suffix slot 里。
Currency amount
Text Area
多行输入,state × shape × color 同 TextField。auto-grow 默认开。
States (purple, rounded)
With label
Select Option - Types
general / single / multiple / image 四种类型。3 色 × rounded / pill。
All types (purple, single trigger)
Select Option - States
idle / focus / disabled / error 4 态。
States (purple, single)
Select Option - BG Variants
white / grey 两种背景,适应不同 section 底色。
BG variants
Datepicker
点击展开日历,支持 single / range。state × shape × color。
States (purple, rounded)
Shape × Color
Media Upload
图片拖拽上传,3 色。ProfileImgUpload 是头像版。
Colors
Drag and drop image here, or click add image
Drag and drop image here, or click add image
Drag and drop image here, or click add image
Profile Image Upload
File Upload
FileUpload(列表 + 按钮)+ FileCard(单条)+ FileTypeIcon(图标)。
File Upload (purple, with files)
Colors (2 files each)
File Type Icons
Selection Control
Toggle / Radio / Checkbox 三组控件,3 色 × 多种状态。
Toggle (size md, 3 colors)
Toggle (sm)
Radio Button (3 colors)
Checkbox (3 colors)
Checkbox With Label
Icon Selector
ColorPicker(色点)+ IconPicker(图标网格)+ IconSelector(头像预览 + 搜索弹层)。