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)

idle
focus
filled
disabled
Error message goes here
error

Color: blue (rounded)

idle
focus
filled
disabled
Error message goes here
error

Color: black (rounded)

idle
focus
filled
disabled
Error message goes here
error

Color: purple (pill)

idle
focus
filled
disabled
Error message goes here
error

Color: blue (pill)

idle
focus
filled
disabled
Error message goes here
error

Color: black (pill)

idle
focus
filled
disabled
Error message goes here
error

Text Field - With Icon

左图标 / 右图标 / 后缀单位 / 搜索框。

Icon variants

icon-left
icon-right
cm
suffix unit
password

Text Field - With Label

带 label 的输入框,可加 headerAction(帮助链接等)。

Inside Label

plain
Forgot?
with helper link
Only letters and numbers allowed
error with message

Text Field - Multiple (tags)

带 chip 标签的输入,可删除单个 chip。3 色。

Tags per color

DesignProductResearch
purple
DesignProductResearch
blue
DesignProductResearch
black

Text Field + Select Suffix

输入 + 尾部下拉,常用于币种/单位切换。Suffix 组件挂在 TextField 的 suffix slot 里。

Currency amount

USD / EUR / CNY

Text Area

多行输入,state × shape × color 同 TextField。auto-grow 默认开。

States (purple, rounded)

idle
focus
filled
disabled
This field is required
error

With label

plain

Select Option - Types

general / single / multiple / image 四种类型。3 色 × rounded / pill。

All types (purple, single trigger)

Select general
general
Select single
single
Select multiple
multiple
Select image
image

Select Option - States

idle / focus / disabled / error 4 态。

States (purple, single)

Select option
idle
Select option
focus
Option A
disabled
Select option
Please pick one
error

Select Option - BG Variants

white / grey 两种背景,适应不同 section 底色。

BG variants

White bg
white bg
Grey section
grey bg (in grey section)

Datepicker

点击展开日历,支持 single / range。state × shape × color。

States (purple, rounded)

Select date
idle
Select date
focus
Select date
filled
Select date
disabled
Select date
error

Shape × Color

Pick date
purple / rounded
Pick date
purple / pill
Pick date
blue / rounded
Pick date
blue / pill
Pick date
black / rounded
Pick date
black / pill

Media Upload

图片拖拽上传,3 色。ProfileImgUpload 是头像版。

Colors

Product images
63%

Drag and drop image here, or click add image

purple
Product images
63%

Drag and drop image here, or click add image

blue
Product images
63%

Drag and drop image here, or click add image

black

Profile Image Upload

empty
with image

File Upload

FileUpload(列表 + 按钮)+ FileCard(单条)+ FileTypeIcon(图标)。

File Upload (purple, with files)

Attachments
pdf
report.pdf
2.4 MB
png
preview.png
880 KB-
Uploaded
zip
archive.zip
12 MB-
Uploading
docx
broken.docx
1.2 MB-
Failed

Colors (2 files each)

pdf
report.pdf
2.4 MB
png
preview.png
880 KB-
Uploaded
purple
pdf
report.pdf
2.4 MB
png
preview.png
880 KB-
Uploaded
blue
pdf
report.pdf
2.4 MB
png
preview.png
880 KB-
Uploaded
black

File Type Icons

pdfpdf
xlsxxlsx
docxdocx
pptxpptx
pngpng
zipzip
svgsvg
unknownunknown

Selection Control

Toggle / Radio / Checkbox 三组控件,3 色 × 多种状态。

Toggle (size md, 3 colors)

purple
blue
black
disabled on

Toggle (sm)

purple
blue
black

Radio Button (3 colors)

purple
blue
black
unchecked
disabled on

Checkbox (3 colors)

purple
blue
black
unchecked

Checkbox With Label

Subscribe to updates
left
right

Icon Selector

ColorPicker(色点)+ IconPicker(图标网格)+ IconSelector(头像预览 + 搜索弹层)。

Color Picker

Icon Picker (3 colors)

purple
blue
black

Icon Selector (full, 点击展开)

Select an icon