Form component description

Component	Description	Minimum version
button	button	1.0.0
checkbox-group	A multiple selector that consists of multiple checkboxes inside	1.0.0
checkbox	Multi-select items	1.0.0
form	The form, which places user input within the<switch/><radio/><input/><checkbox/><slider/><picker/> component, submits	1.0.0
input	Enter the box	1.0.0
label	Used to improve the usability of form components, use the for attribute to find the corresponding id, or place the control under the label, and when clicked, the corresponding control	is triggered 1.0.0
picker	The scroll selector that bounces up from the bottom now supports three selectors, distinguished by mode, which are normal selector, time picker, date picker, and the default is normal selector	1.0.0
picker-view	The scroll selector for embedded pages	1.0.0
picker-view-column	Scroll the selector subkey	1.0.0
radio-group	A single selector that consists of multiple	1.0.0
radio	Radio items	1.0.0
slider	Slide selector	1.0.0
switch	Switch selector	1.0.0
textarea	The multiline input box	1.0.0
editor	Rich text editor	2.5.2
keyboard-accessory	Set the input/textarea focus when the keyboard is above the cover-view/cover-image toolbar view	2.11.6

button

Properties	Type	The default value is	Required	Description	Minimum version
size	string	default	No	The size of the button is	1.0.0
type	string	default	No	The style type of the button is	1.0.0
plain	boolean	false	No	Whether the button is hollowed out, the background color is transparent	1.0.0
disabled	boolean	false	No	Whether to disable	1.0.0
loading	boolean	false	No	Whether the name is preceded by a loading icon	1.0.0
form-type	string		No	For form components, clicking each triggers the form component's submit/reset event	1.0.0
open-type	string		No	Open capability	2.12.11
hover-class	string	button-hover	No	Specifies the style class where the button is pressed. When hover-class="none", no click-on effect	2.11.4
hover-stop-propagation	boolean	false	No	Specifies whether to prevent click-through	from occurring for ancestor nodes of this node 2.11.4
hover-start-time	number	20	No	How often after holding and holding the click state appears, in milliseconds	2.11.4
hover-stay-time	number	70	No	The click state retention time after the finger is released,	in milliseconds 2.11.4
lang	string	en	No	Specifies the language, zh_CN Chinese Simplified, zh_TW Chinese Traditional, en English,	to return user information
session-from	string		No	Session source, valid when open-type="contact"	2.12.11
send-message-title	string	The current title	No	The in-session message card header, valid for open-type="contact"	2.12.11
send-message-path	The current sharing path	default	No	The in-session message card clicks to jump to the applet path, which is valid when open-type="contact"	2.12.11
send-message-img	string	Screenshot	No	In-session message card image, valid for open-type="contact"	2.12.11
app-parameter	string		No	When opening the APP, the parameters passed to the APP are valid	when open-type=launchApp 2.12.11
show-message-card	boolean	false	No	Whether to display the intra-session message card, set this parameter to true, the user entering the customer service session will display a "Mini App that may be sent" prompt in the lower right corner, the user can quickly send a Mini App message after clicking, open-type="contact" is valid when	2.12.11
bindgetuserinfo	eventhandle		No	When the user clicks the button, the obtained user information is returned, the detail data of the callback is consistent with the ft.getUserInfo return, and the open-type="getUserInfo" is valid when the	2.12.11
bindcontact	eventhandle		No	The customer service message callback, open-type="contact" is valid when
bindgetphonenumber	eventhandle		No	Get the user phone number callback, open-type=getPhoneNumber when valid	2.12.11
binderror	eventhandle		No	When using the open capability, an error callback occurs, and the open-type=launchApp is valid	2.12.11
bindopensetting	eventhandle		No	After opening the authorization settings page, the callback, open-type=openSetting, is valid	2.12.11
bindlaunchapp	eventhandle		No	The callback to open the APP successfully, open-type=launchApp is valid	2.12.11
bindchooseavatar	eventhandle		No	The callback to open the APP successfully, open-type=launchApp is valid	2.12.11

The legal value of ### size

The value	Description	Minimum version
default	The default size is
mini	Small size

The legal value of ### type

The value	Description	Minimum version
primary	Green
default	White
warn	Red

The legal value of the form-type

The value	Description	Minimum version
submit	Submit form
reset	Reset the form

The legal value of the open-type

The value	Description	Minimum version
contact	Open the Customer Session	2.12.11
share	Triggers the user forwarding	2.12.11
getPhoneNumber	Get the user's mobile phone number, you can get the user information in the bindgetphonenumber callback	2.12.11
getUserInfo	To get user information, you can get user information in the bindgetuserinfo callback	2.12.11
launchApp	Open the APP, you can set the parameter	transmitted to the APP through the app-parameter property 2.12.11
openSetting	Open the Authorization Settings page	2.12.11
feedback	Open the feedback page	2.12.11
chooseAvatar	To get the user avatar, you can get the avatar information in the bindchooseavatar callback	2.12.11

It should be noted that contact, getPhoneNumber, feedback, chooseAvatar and other functions will not be implemented in the SDK, when calling the above functions, the parameters will be transmitted to the APP, the APP itself to implement the relevant functions, specifically refer to the APP's documentation:

The legal value of lang

The value	Description	Minimum version
en	English
zh_CN	Chinese Simplified
zh_TW	Chinese Traditional

checkbox

Properties	Type	The default value is	Required	Description	Minimum version
color	string	#09BB07	No	The color of the checkbox is	the color of the css 1.0.0
value	string		No	The checkbox identity, which triggers the change event of the checkbox-group when selected, carries the value	of the checkbox 2.11.4
disabled	boolean	false	No	Whether to disable	2.11.4
checked	boolean	false	No	Whether currently selected, you can set the default selected	2.11.4

checkbox-group

Properties	Type	The default value is	Required	Description	Minimum version
bindchange	EventHandle		No	A change event is triggered when the checkbox-group changes, detail = {value:[array of values of the checkbox selected]}	2.11.4

editor

Properties	Type	The default value is	Required	Description	Minimum version
read-only	boolean	false	No	Set the editor to read-only	2.7.0
placeholder	string		No	Prompt message	2.7.0
show-img-size	boolean	false	No	The picture size control is displayed when you tap the image	2.7.0
show-img-toolbar	boolean	false	No	Toolbar controls	appear when you tap the image 2.7.0
show-img-resize	boolean	false	No	The Modify Size Control	is displayed when you tap the image 2.7.0
bindready	eventhandle		No	The	is triggered when editor initialization is complete 2.7.0
bindfocus	eventhandle		No	When the editor is in focus, event.detail = {html, text, delta}	2.7.0
bindblur	eventhandle		No	Triggered when the editor loses focus, detail = {html, text, delta}	2.7.0
bindinput	eventhandle		No	Triggered when the editor content changes, detail = {html, text, delta}	2.7.0
bindstatuschange	eventhandle		No	Triggered when a style is changed in the editor via the Context method, returns the style	that has been set in the selection 2.7.0

form

Properties	Type	The default value is	Required	illustrate	Minimum version
report-submit	boolean	false	No	Whether to return a formId for sending template messages	1.0.0
bindsubmit	eventhandle		No	Carrying data from form triggers the submit event, event.detail = {value : {'name': 'value'} , formId: ''}	1.0.0
bindreset	eventhandle		No	The reset event is triggered when the form is reset	1.0.0
report-submit-timeout	number	0	No	Wait a period of time (in milliseconds) to confirm that the formId takes effect. If this parameter is not specified, there is a small chance that the formId will be invalid (e.g. in the event of a network failure). Specifying this parameter will detect whether the formId is valid, and the time of this parameter will be used as the timeout period for this detection. If it fails, a formId	beginning with requestFormId:fail is returned

label

Properties	Type	The default value is	Required	Description	Minimum version
for	string		No	The id of the bound control	1.0.0

picker

Properties	Type	The default value is	Required	Description	Minimum version
mode	string	selector	No	Selector Type	1.0.0
disabled	boolean	false	No	Whether to disable	1.0.0
confirm-color	string	#586c94	No	Confirm that the button text color	1.0.0
cancel-color	string	#586c94	No	Cancels the button text color	1.0.0
bindcancel	eventhandle		No		is triggered when deselection is made
header-text	string		No	The title of the selector, available only for Android

The legal value of ### mode

The value	Description	Minimum version
selector	Normal selector
multiSelector	Multi-column selector
time	Time Picker
date	Date picker
region	The provincial selector

In addition to the common properties mentioned above, picker has different properties for different modes.

Multi-column selector: mode = multiSelector

Properties	Type	The default value is	Required	Description	Minimum version
range	array/object array	[]	No	When mode is selector or multiSelector, range is valid
range-key	string		No	When mode is selector or multiSelector, range is valid
value	array	[]	No	Indicates that the first few (subscripts start at 0)	in range are selected
bindchange	eventhandle		No	The change event is triggered when the value changes, and event.detail = {value}
bindcolumnchange	eventhandle		No	Triggers	when a column changes

Multi-column selector: mode = time

Properties	Type	The default value is	Required	Description	Minimum version
value	string		No	Represents the selected time in the format "hh:mm"
start	string		No	Represents the beginning of a valid time range in string format	"hh:mm"
end	string		No	Represents the end of a valid time range in string format	"hh:mm"
bindchange	eventhandle		No	The change event is triggered when the value changes, and event.detail = {value}

Multi-column selector: mode = date

Properties	Type	The default value is	Required	Description	Minimum version
value	string		of the day No	Represents the selected date in the format "YYYY-MM-DD"
start	string		No	Represents the beginning of a valid date range in string format	"YYYY-MM-DD"
end	string		No	Represents the end of a valid date range in string format	"YYYY-MM-DD"
fields	string	day	No	Valid values year, month, day, indicate the granularity of the selector
bindchange	eventhandle		No	The change event is triggered when the value changes, and event.detail = {value}

fields valid value: *

The value	Description	Minimum version
year	The selector granularity is	years
month	The selector granularity is month
day	The selector granularity is	days

Multi-column selector: mode = region

Properties	Type	The default value is	Required	Description	Minimum version
value	array	[]	No	Represents the selected province, with the first value of each column	selected by default
custom-item	string		No		You can add a custom item
level	string		No	region	Selector level
bindchange	eventhandle		No	Event.detail = {value, code, postcode}, where the field code is the statistical area code and the postcode is the postal code

picker-view

Properties	Type	The default value is	Required	Description	Minimum version
value	Array		No	The numbers in the array represent the first item selected by the picker-view-column within the picker-view (the subscript starts at 0), and the last item is selected when the number is greater than the optional length of the picker-view-column.	1.0.0
indicator-style	string		No	Sets the style of the box checked in the middle of the selector	1.0.0
indicator-class	string		No	Sets the class name of the checked box in the middle of the selector	2.11.4
immediate-change	boolean	false	No	Whether to trigger the change event as soon as the finger is released. If not turned on, the change event is triggered after the scroll animation ends.
mask-style	string		No	Sets the style	of the mask 2.11.4
mask-class	string		No	Sets the class name	of the mask 2.11.4
bindchange	eventhandle		No	Triggers a change event when scrolling selection, event.detail = {value}; value is an array that indicates that the picker-view-column within picker-view is currently selected	of the first item (subscripts start at 0). 2.11.4
bindpickstart	eventhandle		No	Triggers the event when scrolling selection starts	2.11.4
bindpickend	eventhandle		No	Triggers the event	when scroll selection ends 2.11.4

picker-view-column

Scroll the selector subkey. Can only be placed in picker-view, and the height of its child node is automatically set to match the height of the picker-view check box

radio

Properties	Type	The default value is	Required	Description	Minimum version
color	string	#09BB07	No	The color of radio is	as the color of css 1.0.0
value	string		No	radio identification. When the radio is selected, the change event of the radio-group carries the value	of the radio 2.11.4
checked	boolean	false	No	Whether	is currently selected 2.11.4
disabled	boolean	false	No	Whether to disable	2.11.4

radio-group

Properties	Type	The default value is	Required	Description	Minimum version
bindchange	EventHandle		No	A change event is triggered when the selected item in the radio-group changes, detail = {value:[array of values of selected radio]}	2.11.4

slider

Properties	Type	The default value is	Required	Description	Minimum version
min	number	0	No	The minimum value is	1.0.0
max	number	100	No	Maximum value is	1.0.0
step	number	1	No	Step, the value must be greater than 0 and divisible by (max - min)	1.0.0
disabled	boolean	false	No	Whether to disable	1.0.0
value	number	0	No	The current value is	1.0.0
color	color	#e9e9e9	No	The color of the background bar (using backgroundColor)	1.0.0
selected-color	color	#1aad19	No	The color you selected (using activeColor)	1.0.0
show-value	boolean	false	No	Whether the current value	is displayed 1.0.0
bindchange	eventhandle		No	Event.detail = {value}	that fires after completing a drag 1.0.0
activeColor	color	#1aad19	No	The selected color	2.11.4
backgroundColor	color	#e9e9e9	No	The color of the background bar is	2.11.4
block-size	number	28	No	The size of the slider, which ranges from 12 to 28	2.11.4
block-color	color	#ffffff	No	The color of the slider is	2.11.4
bindchanging	eventhandle		No	Event.detail = {value}	event that fires during dragging 2.11.4

switch

Properties	Type	The default value is	Required	Description	Minimum version
checked	boolean	false	No	Whether	is selected 1.0.0
disabled	boolean	false	No	Whether to disable	1.0.0
type	string	switch	No	Style, valid values: switch, checkbox	1.0.0
color	string	#04BE02	No	The color of switch is	as the color of css 1.0.0
bindchange	eventhandle		No	The change event is triggered when the checked change occurs, and event.detail={ value}	1.0.0

input

Properties	Type	The default value is	Required	Description	Minimum version
value	string		Yes	The initial contents of the input box	2.11.4
type	string	text	No	Type	of input 2.11.4
password	boolean	false	No	Whether it is a password type	2.11.4
placeholder	string		Yes	The placeholder	when the input box is empty 2.11.4
placeholder-style	string		Yes	Specifies the style	of placeholder 2.11.4
placeholder-class	string	input-placeholder	No	Specifies the style class	of placeholder 2.11.4
disabled	boolean	false	No	Whether to disable	2.11.4
maxlength	number	140	No	Maximum input length, when set to -1, does not limit the maximum length	2.11.4
cursor-spacing	number	0	No	Specifies the distance of the cursor from the keyboard, taking the distance from the bottom of the input and the minimum value of the distance specified by cursor-spacing as the distance from the cursor to the keyboard
auto-focus	boolean	false	No	(Soon to be abandoned, please use focus directly ) auto focus, pull up the keyboard
focus	boolean	false	No	Get the focus
confirm-type	string	done	No	Sets the text of the button in the lower-right corner of the keyboard, which takes effect only when type='text'
cursor	number		Yes	The cursor position	when focus is specified
confirm-hold	boolean	false	No	Whether to keep the keyboard unclosed when you click the button in the lower-right corner of the keyboard
selection-start	number	-1	No	The starting position of the cursor, which is valid for automatic aggregation, is used with the selection-end
selection-end	number	-1	No	The cursor end position, which is effective for auto-aggregation, needs to be used with selection-start
adjust-position	boolean	true	No	Whether to automatically push up the page	when the keyboard is played
bindinput	eventhandle		Yes	Triggered when keyboard input is made, event.detail = {value, cursor, keyCode}, keyCode is the key value, supported from 2.1.0, the handler can directly return a string, will replace the contents of the input box.
bindfocus	eventhandle		Yes	Triggered when the input box is in focus, event.detail = { value, height }, height is keyboard height
bindblur	eventhandle		Yes	Triggered when the input box loses focus, event.detail = {value: value}
bindconfirm	eventhandle		Yes	Triggered when the Finish button is clicked, event.detail = {value: value}
bindkeyboardheightchange	eventhandle		Yes	This event is triggered when the keyboard height changes, and event.detail = {height: height, duration: duration}
always-embed	boolean	false	No	Force input to be in the same-layer state, and by default focus, input will cut to a non-same-layer state (only in iOS)
hold-keyboard	boolean	false	No	When focus, the keyboard is not put away when clicking on the page
safe-password-cert-path	string		No	The secure keyboard encrypts the path of the public key, and only the in-package path	is supported
safe-password-length	number		No	Secure keyboard input password length
safe-password-time-stamp	number		No	Secure keyboard encryption timestamp
safe-password-nonce	string		No	Secure keyboard encryption salt value
safe-password-salt	string		No	The secure keyboard calculates the hash salt value, which is invalid if custom-hash is specified
safe-password-custom-hash	string		No	The secure keyboard evaluates the algorithmic expression of hash, such as 'md5(sha1('foo' + sha256(sm3(password + 'bar')))'

The legal value of ### type

The value	Description	Minimum version
text	Text input keyboard
number	Numeric input keyboard
idcard	The ID card input keyboard
digit	Numeric keypad with decimal point

The legal value of the confirm-type

The value	Description	Minimum version
send	The button in the lower-right corner is the Send
search	The button in the lower right corner is the Search
next	The button in the lower right corner is the Next
go	The button in the lower right corner is the Go
done	The button in the lower-right corner is done

textarea

Properties	Type	The default value is	Required	Description	Minimum version
value	string		No	Enter the contents of the box
placeholder	string		No	The placeholder	when the input box is empty
placeholder-style	string		No	Specifies the style of placeholder, which currently only supports color, font-size, and font-weight
placeholder-class	string	textarea-placeholder	No	Specifies the style class	of placeholder
disabled	boolean	false	No	Whether to disable
maxlength	number	140	No	Maximum input length, when set to -1, does not limit the maximum length
auto-focus	boolean	false	No	Auto focus, pull up the keyboard.
focus	boolean	false	No	Get the focus
auto-height	boolean	false	No	Whether auto-height is set automatically, style.height does not take effect when auto-height is set
fixed	boolean	false	No	If textarea is in a position:fixed area, you need to display the specified property fixed to true
cursor-spacing	number	0	No	Specifies the distance of the cursor from the keyboard. Take the distance from the bottom of the textarea and the minimum value of the distance specified by cursor-spacing as the distance the cursor is	from the keyboard
cursor	number	-1	No	The cursor position	when focus is specified
show-confirm-bar	boolean	true	No	Whether to display the	the field above the keyboard with the Finish button
selection-start	number	-1	No	The starting position of the cursor, which is valid for automatic aggregation, is used with the selection-end
selection-end	number	-1	No	The cursor end position, which is effective for auto-aggregation, needs to be used with selection-start
adjust-position	boolean	true	No	Whether to automatically push up the page	when the keyboard is played
hold-keyboard	boolean	false	No	When focus, the keyboard is not put away when clicking on the page
disable-default-padding	boolean	false	No	Whether to remove the default padding	under iOS
bindfocus	eventhandle		No	Triggered when the input box is in focus, event.detail = { value, height }, height is the keyboard height, supported in the base library from 1.9.90
bindblur	eventhandle		No	Triggered when the input box loses focus, event.detail = {value, cursor}
bindlinechange	eventhandle		No	Called when the number of rows in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	eventhandle		No	When the keyboard input is fired, the event.detail = {value, cursor, keyCode}, keyCode is the key value, the tool does not currently support returning the keyCode parameter. The return value of the bindinput handler is not reflected on the textarea
bindconfirm	eventhandle		No	When clicked complete, the confirm event is triggered, and event.detail = {value: value}
bindkeyboardheightchange	eventhandle		No	This event is triggered when the keyboard height changes, and event.detail = {height: height, duration: duration}

keyboard-accessory

tip: The maximum view height is 200px

Sample code