Form Components

Form containers, various input controls and selectors. Each example shows the formatted, highlighted TokUI DSL on the left and the live render on the right; click "Edit" to modify it instantly.

Form Container form

Wraps a group of form controls. On submit, triggers the sub: handler or the native act submission.

Prop	Meaning	Example
act	Submit URL	act:/api/save
mtd	Submit method	mtd:post
sub	Submit handler name	sub:onSubmit
clk	Generic event handler name	clk:onFormClick

The handler referenced by sub: must be pre-registered via TokUI.registerHandler(name, fn); on a btn, use sub:xxx to trigger form submission.

1[card tt:登录表单]

2 [form act:/api/login mtd:post sub:onLogin]

3 [input l:账号 ph:"请输入账号" req]

4 [pwd l:密码 ph:"请输入密码" req]

5 [ft]

6 [btn tx:登录 v:primary sub:onLogin]

7 [btn tx:重置 v:ghost t:reset]

8 [/ft]

9 [/form]

10[/card]

Loading TokUI…

TokUI DSL · code ↔ render

Input input

Single-line text input, self-closing. l for label, ph for placeholder, t for native type, val for initial value.

Prop	Meaning	Example
l	Label	l:姓名
ph	Placeholder hint	ph:"请输入姓名"
t	Native input type	t:email
n	Field name	n:username
val	Default value	val:Tom
id	Element ID	id:username
w	Width	w:240
hint	Hint text	hint:6~16 个字符
search	Search style	search
req / dis / ro	Required / Disabled / Read-only	req

Variants: error / success (validation states), sm / lg (sizes), underline (underline style), pill (rounded).

1[input l:姓名 ph:"请输入姓名" req]

2[input l:邮箱 t:email ph:name@example.com]

3[input l:带默认值 val:张三]

4[input l:搜索框 ph:"输入关键词搜索" search]

5[input l:禁用态 ph:不可编辑 dis]

6[input l:错误状态 v:error ph:校验失败]

Loading TokUI…

TokUI DSL · code ↔ render

Password pwd

Password input with show/hide toggle, self-closing. Same props as input, plus toggle to control whether plain text can be revealed.

Prop	Meaning	Example
l	Label	l:密码
ph	Placeholder hint	ph:"至少 6 位"
toggle	Show/hide toggle button	toggle
req / dis	Required / Disabled	req
v	Variant (same as input)	v:error

1[pwd l:登录密码 ph:"请输入密码" req toggle]

2[pwd l:支付密码 ph:6 位数字 req]

3[pwd l:禁用态 ph:不可编辑 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Textarea textarea

Multi-line text input container. rows for initial row count, maxlen for max character count, auto for auto-growing height.

Prop	Meaning	Example
l	Label	l:描述
ph	Placeholder hint	ph:"请输入描述"
rows	Initial rows	rows:4
maxrows	Max rows (auto mode)	maxrows:8
maxlen	Max character count	maxlen:200
auto	Auto-grow height	auto
tx	Default content	tx:"默认文本"
req / dis / ro	Required / Disabled / Read-only	req

1[textarea l:默认值自闭合 tx:"热爱前端开发，擅长组件设计与性能优化。" maxlen:120]

2[textarea l:只读协议自闭合 ro tx:"本服务仅供学习，禁止商用。"]

3[textarea l:空容器嵌套 ph:"请简单介绍自己" rows:3]

4[/textarea]

5[textarea l:自适应高度 auto rows:2 maxrows:6 ph:"内容增多会自动撑开"]

6[/textarea]

7[textarea l:带内容嵌套 rows:4 ph:"请输入反馈"]

8 希望增加暗色主题与多语言支持。

9[/textarea]

Loading TokUI…

TokUI DSL · code ↔ render

Dropdown select / opt

select is a container; opt are child option nodes. multi for multi-select, req for required.

Prop	Meaning	Applies to
l	Label	select
ph	Placeholder hint	select
multi	Multi-select	select
n	Field name	select
req	Required	select
v	Variant	select
tx	Option text	opt
v	Option value	opt
chk	Default selected	opt

select variants: error / success.

1[select l:单选部门 ph:"请选择"]

2 [opt 技术部]

3 [opt 市场部 chk]

4 [opt 运营部]

5[/select]

6[select l:多选技能 multi]

7 [opt React chk]

8 [opt Vue chk]

9 [opt Node]

10[/select]

11[select l:必选城市 req ph:"请选择城市"]

12 [opt 北京]

13 [opt 上海]

14[/select]

Loading TokUI…

TokUI DSL · code ↔ render

Radio Group radio

radio is a container; opt are child option nodes. Options within the same group are mutually exclusive.

Prop	Meaning	Applies to
l	Group label	radio
n	Field name	radio
v	Variant	radio
tx	Option text	opt
v	Option value	opt
chk	Default selected	opt

1[radio l:性别]

2 [opt 男]

3 [opt 女 chk]

4[/radio]

5[radio l:配送方式]

6 [opt 快递 chk]

7 [opt 自提]

8 [opt 同城配送]

9[/radio]

Loading TokUI…

TokUI DSL · code ↔ render

Checkbox checkbox

Self-closing. l for label, chk for default checked.

Prop	Meaning	Example
l	Label	l:同意条款
chk	Default checked	chk
n	Field name	n:agree
v	Option value	v:1
id	Element ID	id:agree
dis	Disabled	dis

1[checkbox l:我已阅读并同意服务条款 chk]

2[checkbox l:订阅每周精选]

3[checkbox l:禁用且勾选 chk dis]

Loading TokUI…

TokUI DSL · code ↔ render

Switch switch

Self-closing. chk to turn on, clk for the toggle callback.

Prop	Meaning	Example
l	Label	l:邮件通知
chk	Default on	chk
dis	Disabled	dis
clk	Toggle handler name	clk:onToggle
n	Field name	n:notify
v	Value	v:1
id	Element ID	id:notify

Variants: sm / lg.

1[switch l:接收邮件通知 chk]

2[switch l:免打扰模式]

3[switch l:夜间静音 clk:onNight]

4[switch l:小尺寸 chk v:sm]

5[switch l:大尺寸 chk v:lg]

Loading TokUI…

TokUI DSL · code ↔ render

Slider slider

Self-closing. min/max/step for range and step, v for current value.

Prop	Meaning	Example
l	Label	l:音量
min	Minimum value	min:0
max	Maximum value	max:100
step	Step	step:5
v	Current value	v:60
dis	Disabled	dis
clk	Drag callback	clk:onSlide
n	Field name	n:volume
id	Element ID	id:volume

Variants: sm / lg.

1[slider l:音量 v:60 min:0 max:100]

2[slider l:亮度 step:5 v:75]

3[slider l:不透明度 v:30 clk:onOpacity]

4[slider l:禁用 v:50 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Rate rate

Self-closing. max for max star count, v for current rating, clk for the select callback.

Prop	Meaning	Example
l	Label	l:评分
v	Current value	v:4
max	Max stars	max:5
clk	Select callback	clk:onRate
dis	Read-only / disabled	dis
tx	Caption text	tx:很好

1[rate l:商品评分 v:4 max:5]

2[rate l:服务评分 v:0 max:5 clk:onRate]

3[rate l:只读评分 v:5 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Number Input numinput

Self-closing. Number input with increment/decrement buttons; min/max/step constrain the range.

Prop	Meaning	Example
l	Label	l:数量
v	Current value	v:1
min	Minimum value	min:1
max	Maximum value	max:99
step	Step	step:1
dis	Disabled	dis
n	Field name	n:qty
id	Element ID	id:qty

1[numinput l:购买数量 v:1 min:1 max:99 step:1]

2[numinput l:时长（小时） v:8 min:0 max:24 step:0.5]

3[numinput l:禁用 v:5 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Button Group btngroup

Container that wraps a set of btns. In form scenarios, commonly used as a multi-button action area (for primary button usage see Basic Components).

Prop	Meaning	Example
id	Group ID	id:actions
v	Variant	v:vertical

Variants: vertical (vertical layout), pill (rounded group).

1[btngroup]

2 [btn tx:保存 v:primary sub:onSave]

3 [btn tx:取消 v:ghost]

4[/btngroup]

5[btngroup v:vertical]

6 [btn tx:上传 v:primary]

7 [btn tx:下载]

8 [btn tx:删除 v:danger]

9[/btngroup]

Loading TokUI…

TokUI DSL · code ↔ render

Picker picker

Container; a richer selection panel than select (with search / multiple columns). multi for multi-select, dis for disabled.

Prop	Meaning	Example
l	Label	l:城市
ph	Placeholder hint	ph:"请选择"
multi	Multi-select	multi
dis	Disabled	dis
n	Field name	n:city
v	Value	v:bj
id	Element ID	id:city

Variants: error / success.

1[picker l:所在城市 ph:"请选择城市"]

2[/picker]

3[picker l:标签（多选） multi ph:"请选择标签"]

4[/picker]

5[picker l:禁用态 ph:不可选择 dis]

6[/picker]

Loading TokUI…

TokUI DSL · code ↔ render

Cascader cascader

Container; a multi-level selector that expands level by level (e.g. province/city/district). clk for the select callback.

Prop	Meaning	Example
l	Label	l:地区
ph	Placeholder hint	ph:"请选择"
dis	Disabled	dis
clk	Select callback	clk:onPick
v	Value	v:"北京-朝阳"
n	Field name	n:region
id	Element ID	id:region

Variants: error / success.

1[cascader l:所在地区 ph:"请选择省/市/区"]

2[/cascader]

3[cascader l:商品分类 clk:onCategory]

4[/cascader]

Loading TokUI…

TokUI DSL · code ↔ render

Upload upload

Self-closing. accept restricts file types, multi for multiple files, max for maximum count.

Prop	Meaning	Example
l	Label	l:附件
ph	Placeholder hint	ph:"点击或拖拽上传"
accept	Allowed types	accept:"image/*"
multi	Multiple files	multi
max	Max count	max:5
dis	Disabled	dis
clk	Upload callback	clk:onUpload
n	Field name	n:file
id	Element ID	id:file

Variants: sm / lg.

1[upload l:头像 accept:"image/*" ph:"点击上传头像"]

2[upload l:多文件上传 multi max:5 ph:"支持最多 5 个文件"]

3[upload l:禁用上传 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Date Picker datepicker

Self-closing. fmt for date format, v for default value, clk for the select callback.

Prop	Meaning	Example
l	Label	l:出生日期
ph	Placeholder hint	ph:"请选择日期"
fmt	Date format	fmt:yyyy-MM-dd
v	Default value	v:2026-06-20
clk	Select callback	clk:onDate
dis	Disabled	dis
n	Field name	n:birthday
id	Element ID	id:birthday

1[datepicker l:出生日期 ph:"请选择日期" fmt:yyyy-MM-dd]

2[datepicker l:默认值示例 v:2026-06-20]

3[datepicker l:禁用态 ph:不可选择 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Time Picker timepicker

Self-closing. fmt for time format, v for default value.

Prop	Meaning	Example
l	Label	l:开始时间
ph	Placeholder hint	ph:"请选择时间"
fmt	Time format	fmt:HH:mm
v	Default value	v:09:30
clk	Select callback	clk:onTime
dis	Disabled	dis
n	Field name	n:time
id	Element ID	id:time

1[timepicker l:开始时间 ph:"请选择时间" fmt:HH:mm]

2[timepicker l:默认值 v:09:30]

3[timepicker l:禁用态 ph:不可选择 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Datetime Picker datetimepicker

Self-closing. Combined date + time picker; fmt for custom format.

Prop	Meaning	Example
l	Label	l:预约时间
ph	Placeholder hint	ph:"请选择日期时间"
fmt	Format	fmt:"yyyy-MM-dd HH:mm"
v	Default value	v:"2026-06-20 09:30"
clk	Select callback	clk:onDateTime
dis	Disabled	dis
n	Field name	n:dt
id	Element ID	id:dt

1[datetimepicker l:预约时间 ph:"请选择日期时间" fmt:"yyyy-MM-dd HH:mm"]

2[datetimepicker l:默认值 v:"2026-06-20 09:30"]

3[datetimepicker l:禁用态 ph:不可选择 dis]

Loading TokUI…

TokUI DSL · code ↔ render

Transfer transfer

Container; a two-column mutually exclusive multi-select mover. tt/tt2 for the two column titles, clk for the move callback.

Prop	Meaning	Example
l	Label	l:分配角色
tt	Left column title	tt:未选
tt2	Right column title	tt2:已选
clk	Move callback	clk:onTransfer
h	Fixed height (inner scroll)	h:240 / h:40vh
mh	Max height (overrides default 320px)	mh:200
dis	Disabled	dis
n	Field name	n:roles
id	Element ID	id:roles

Variants: sm (max 260px) / lg (max 400px). Default max-height 320px; overflowing lists scroll inside (scrollbar transparent by default, grey semi-transparent on hover).

1[transfer l:角色分配 tt:待分配 tt2:已分配 clk:onTransfer]

2 [opt v:admin tx:系统管理员]

3 [opt v:editor tx:内容编辑 chk]

4 [opt v:viewer tx:只读访客]

5 [opt v:auditor tx:审计员 chk]

6 [opt v:dev tx:开发者]

7[/transfer]

Loading TokUI…

TokUI DSL · code ↔ render

h fixed height and mh max height examples:

1[transfer l:固定高度 h:160 tt:待 tt2:已]

2 [opt v:1 tx:选项一]

3 [opt v:2 tx:选项二 chk]

4 [opt v:3 tx:选项三]

5 [opt v:4 tx:选项四]

6 [opt v:5 tx:选项五 chk]

7 [opt v:6 tx:选项六]

8[/transfer]

9[transfer l:最大高度 mh:140 tt:候选 tt2:已选]

10 [opt v:a tx:短列表A]

11 [opt v:b tx:短列表B chk]

12[/transfer]

Loading TokUI…

TokUI DSL · code ↔ render

Input Tag input-tag

Press Enter to add a tag, click a tag's × to remove it. tags for initial tags, max for maximum count. Self-closing when tags is present; otherwise close with [/input-tag].

Prop	Meaning	Example
l	Label	l:标签
ph	Placeholder hint	ph:"输入后回车添加"
n	Field name	n:tags
max	Max count	max:8
tags	Initial tags (comma-separated)	tags:"JS,Python"
dis	Disabled	dis

1[input-tag l:技术栈 ph:"输入后回车添加" max:8 tags:"JavaScript,Python,Go"]

2[input-tag l:极简自闭合 tags:"React,Vue"]

3[input-tag l:空容器 ph:"无初始标签，手动添加"]

4[/input-tag]

5[input-tag l:禁用态 tags:"只读模式" dis]

Loading TokUI…

TokUI DSL · code ↔ render

For the full DSL syntax (prop shorthands, variant whitelist, streaming render constraints, etc.), see DSL Syntax.