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

suffix unit

password

Text Field - With Label

带 label 的输入框，可加 headerAction（帮助链接等）。

Inside Label

plain

PasswordForgot?

with helper link

Username

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

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

Description

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%

拖放图片到这里，或点击添加图片

purple

Product images

63%

拖放图片到这里，或点击添加图片

blue

Product images

63%

拖放图片到这里，或点击添加图片

black

Profile Image Upload

empty

with image

File Upload

FileUpload（列表 + 按钮）+ FileCard（单条）+ FileTypeIcon（图标）。

File Upload (purple, with files)

Attachments

report.pdf

2.4 MB

preview.png

880 KB-

已上传

archive.zip

12 MB-

上传中

broken.docx

1.2 MB-

上传失败

Colors (2 files each)

report.pdf

2.4 MB

preview.png

880 KB-

已上传

purple

report.pdf

2.4 MB

preview.png

880 KB-

已上传

blue

report.pdf

2.4 MB

preview.png

880 KB-

已上传

black

File Type Icons

pdf

xlsx

docx

pptx

png

zip

svg

unknown

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