mini-yu/uni_modules/tdesign-uniapp/components/input

:: BASE_DOC ::

API

Input Props

name	type	default	description	required
custom-style	Object	-	CSS(Cascading Style Sheets)	N
adjust-position	Boolean	true	-	N
align	String	left	text align type。options: left/center/right	N
allow-input-over-max	Boolean	false	allow to continue input on value length is over maxlength or maxcharacter	N
always-embed	Boolean	false	-	N
auto-focus	Boolean	false	-	N
borderless	Boolean	false	input without border	N
clear-trigger	String	always	show clear icon, clicked to clear input value。options: always / focus	N
clearable	Boolean / Object	false	show clear icon, clicked to clear input value	N
confirm-hold	Boolean	false	-	N
confirm-type	String	done	options: send/search/next/go/done	N
cursor	Number	-1	-	N
cursor-color	String	#0052d9	-	N
cursor-spacing	Number	0	-	N
disabled	Boolean	undefined	make input to be disabled	N
error-message	String	-	deprecated	N
focus	Boolean	false	-	N
format	Function	-	input value formatter, type=number does not work. if you need to format number, InputNumber Component might be better。Typescript：InputFormatType type InputFormatType = (value: InputValue) => string。see more ts definition	N
hold-keyboard	Boolean	false	-	N
label	String	-	text on the left of input	N
layout	String	horizontal	options: vertical/horizontal	N
maxcharacter	Number	-	-	N
maxlength	Number	-1	-	N
password	Boolean	false	deprecated	N
placeholder	String	undefined	-	N
placeholder-class	String	input-placeholder	-	N
placeholder-style	String	-	-	N
prefix-icon	String / Object	-	-	N
readonly	Boolean	undefined	-	N
safe-password-cert-path	String	-	-	N
safe-password-custom-hash	String	-	-	N
safe-password-length	Number	-	-	N
safe-password-nonce	String	-	-	N
safe-password-salt	String	-	-	N
safe-password-time-stamp	Number	-	-	N
selection-end	Number	-1	-	N
selection-start	Number	-1	-	N
size	String	medium	deprecated。options: small/medium。Typescript：'medium' | 'small'	N
status	String	default	options: default/success/warning/error	N
suffix	String	-	suffix content before suffixIcon	N
suffix-icon	String / Object	-	-	N
tips	String	-	tips on the bottom of input, different status can make tips to be different color	N
type	String	text	options: text/number/idcard/digit/safe-password/password/nickname	N
value	String / Number	-	input value。Typescript：InputValue type InputValue = string | number。see more ts definition	N
default-value	String / Number	-	input value。uncontrolled property。Typescript：InputValue type InputValue = string | number。see more ts definition	N

Input Events

name	params	description
blur	(context: { value: InputValue })	-
change	(context: { value: InputValue, cursor: number, keyCode: number })	-
clear	-	-
click	(context: { trigger: InputTrigger })	see more ts definition。 type InputTrigger = 'suffix' | 'suffix-icon'
enter	(context: { value: InputValue })	-
focus	(context: { value: InputValue })	-
keyboardheightchange	(context: { height: number, duration: number })	-
nicknamereview	(context: { pass: boolean, timeout: boolean })	-
validate	(context: { error?: 'exceed-maximum' | 'below-minimum' })	trigger on text length being over max length or max character

Input Slots

name	Description
extra	-
label	text on the left of input
prefix-icon	-
suffix	suffix content before suffixIcon
suffix-icon	-
tips	-

Input External Classes

className	Description
t-class	-
t-class-clearable	-
t-class-input	-
t-class-label	-
t-class-prefix-icon	-
t-class-suffix	-
t-class-suffix-icon	-
t-class-tips	-

CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name	Default Value	Description
--td-input-align-items	center	-
--td-input-bg-color	@bg-color-container	-
--td-input-border-color	@component-stroke	-
--td-input-border-left-space	32rpx	-
--td-input-border-right-space	0	-
--td-input-default-text-color	@text-color-primary	-
--td-input-default-tips-color	@text-color-placeholder	-
--td-input-disabled-text-color	@text-color-disabled	-
--td-input-error-text-color	@error-color	-
--td-input-error-tips-color	@error-color	-
--td-input-label-max-width	5em	-
--td-input-label-min-width	2em	-
--td-input-label-text-color	@text-color-primary	-
--td-input-label-text-font	@font-body-large	-
--td-input-placeholder-text-color	@text-color-placeholder	-
--td-input-placeholder-text-font	@font-body-large	-
--td-input-prefix-icon-color	@text-color-primary	-
--td-input-success-text-color	@success-color	-
--td-input-success-tips-color	@success-color	-
--td-input-suffix-icon-color	@text-color-placeholder	-
--td-input-suffix-text-color	@text-color-primary	-
--td-input-vertical-padding	32rpx	-
--td-input-warning-text-color	@warning-color	-
--td-input-warning-tips-color	@warning-color	-