Textfield

• Docs
• API

Tag name: <vscode-textfield>

A simple inline textfield

When participating in a form, it supports the :invalid pseudo class. Otherwise the error styles can be applied through the invalid property.

Properties

autocomplete

Name	autocomplete
Attribute	autocomplete
Type	'on' | 'off' | undefined
Default	undefined

autofocusreflects

Name	autofocus
Attribute	autofocus
Type	boolean
Default	false

defaultValue

Name	defaultValue
Attribute	default-value
Type	string
Default	''

disabledreflects

Name	disabled
Attribute	disabled
Type	boolean
Default	false

focusedreflects

Name	focused
Attribute	focused
Type	boolean
Default	false

formreadonly

Name	form
Type	HTMLFormElement | null

invalidreflects

Name	invalid
Attribute	invalid
Type	boolean
Default	false
Description	Set error styles on the component. This is only intended to apply styles when custom error validation is implemented. To check whether the component is valid, use the checkValidity method.

max

Name	max
Attribute	max
Type	number | undefined
Default	undefined

maxLength

Name	maxLength
Attribute	maxLength
Type	number | undefined
Default	undefined

maxlength

Name	maxlength
Type	number | undefined
Description	Lowercase alias to maxLength

min

Name	min
Attribute	min
Type	number | undefined
Default	undefined

minLength

Name	minLength
Attribute	minLength
Type	number | undefined
Default	undefined

minlength

Name	minlength
Type	number | undefined
Description	Lowercase alias to minLength

multiplereflects

Name	multiple
Attribute	multiple
Type	boolean
Default	false

namereflects

Name	name
Attribute	name
Type	string | undefined
Default	undefined

pattern

Name	pattern
Attribute	pattern
Type	string | undefined
Default	undefined
Description	Specifies a regular expression the form control's value should match. MDN Reference

placeholder

Name	placeholder
Attribute	placeholder
Type	string | undefined
Default	undefined

readonlyreflects

Name	readonly
Attribute	readonly
Type	boolean
Default	false

requiredreflects

Name	required
Attribute	required
Type	boolean
Default	false

step

Name	step
Attribute	step
Type	number | undefined
Default	undefined

typereflects

Name	type
Attribute	type
Type	InputType
Description	Same as the type of the native <input> element but only a subset of types are supported. The supported ones are: color,date,datetime-local,email,file,month,number,password,search,tel,text,time,url,week

validationMessagereadonly

Name	validationMessage

validityreadonly

Name	validity
Type	ValidityState

value

Name	value
Attribute	value
Type	string

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

willValidatereadonly

Name	willValidate

wrappedElementreadonly

Name	wrappedElement
Type	HTMLInputElement

Methods

checkValidity() : boolean

Name	checkValidity
Description	Check the component's validity state when built-in validation is used. Built-in validation is triggered when any validation-related attribute is set. Validation-related attributes are: max, maxlength, min, minlength, pattern, required, step. See this the MDN reference for more details.

reportValidity()

Name	reportValidity

Events

change

Name	change
Type	Event

input

Name	input
Type	InputEvent

vsc-changedeprecated

Name	vsc-change
Type	CustomEvent
Description	Deprecation warning! true

vsc-inputdeprecated

Name	vsc-input
Type	CustomEvent
Description	Deprecation warning! true

Slots

content-after

Description	A slot after the editable area but inside of the component. It is used to place icons.

content-before

Description	A slot before the editable area but inside of the component. It is used to place icons.

CSS Custom Properties

--vscode-button-background

Name	--vscode-button-background
Default value	#0078d4

--vscode-button-foreground

Name	--vscode-button-foreground
Default value	#ffffff

--vscode-button-hoverBackground

Name	--vscode-button-hoverBackground
Default value	#026ec1

--vscode-focusBorder

Name	--vscode-focusBorder
Default value	#0078d4

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif
Description	A sans-serif font type depends on the host OS.

--vscode-font-size

Name	--vscode-font-size
Default value	13px

--vscode-font-weight

Name	--vscode-font-weight
Default value	normal

--vscode-input-placeholderForeground

Name	--vscode-input-placeholderForeground
Default value	#989898

--vscode-inputValidation-errorBackground

Name	--vscode-inputValidation-errorBackground
Default value	#5a1d1d

--vscode-inputValidation-errorBorder

Name	--vscode-inputValidation-errorBorder
Default value	#be1100

--vscode-settings-textInputBackground

Name	--vscode-settings-textInputBackground
Default value	#313131

--vscode-settings-textInputBackground

Name	--vscode-settings-textInputBackground
Default value	#313131

--vscode-settings-textInputBorder

Name	--vscode-settings-textInputBorder
Default value	var(--vscode-settings-textInputBackground, #3c3c3c)

--vscode-settings-textInputForeground

Name	--vscode-settings-textInputForeground
Default value	#cccccc