Textfield

<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: Attribute autocomplete
Type 'on' | 'off' | undefined
Default undefined
autofocus reflected: Attribute autofocus
Type boolean
Default false
defaultValue: Attribute default-value
Type string
Default ''
disabled reflected: Attribute disabled
Type boolean
Default false
focused reflected: Attribute focused
Type boolean
Default false
form readonly: Type HTMLFormElement | null
invalid reflected: 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.

Attribute invalid
Type boolean
Default false
max: Attribute max
Type number | undefined
Default undefined
maxLength: Attribute maxLength
Type number | undefined
Default undefined
maxlength: Lowercase alias to maxLength

Type number | undefined
min: Attribute min
Type number | undefined
Default undefined
minLength: Attribute minLength
Type number | undefined
Default undefined
minlength: Lowercase alias to minLength

Type number | undefined
multiple reflected: Attribute multiple
Type boolean
Default false
name reflected: Attribute name
Type string | undefined
Default undefined
pattern: Specifies a regular expression the form control's value should match. MDN Reference

Attribute pattern
Type string | undefined
Default undefined
placeholder: Attribute placeholder
Type string | undefined
Default undefined
readonly reflected: Attribute readonly
Type boolean
Default false
required reflected: Attribute required
Type boolean
Default false
step: Attribute step
Type number | undefined
Default undefined
type reflected: 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

Attribute type
Type InputType
validity readonly: Type ValidityState
value: Attribute value
Type string
version readonly: VSC Element version
wrappedElement readonly: Type HTMLInputElement

Attribute	autocomplete
Type	`'on' \| 'off' \| undefined`
Default	`undefined`

Attribute	autofocus
Type	`boolean`
Default	`false`

Attribute	default-value
Type	`string`
Default	`''`

Attribute	disabled
Type	`boolean`
Default	`false`

Attribute	focused
Type	`boolean`
Default	`false`

Type	`HTMLFormElement \| null`

Attribute	invalid
Type	`boolean`
Default	`false`

Attribute	max
Type	`number \| undefined`
Default	`undefined`

Attribute	maxLength
Type	`number \| undefined`
Default	`undefined`

Type	`number \| undefined`

Attribute	min
Type	`number \| undefined`
Default	`undefined`

Attribute	minLength
Type	`number \| undefined`
Default	`undefined`

Type	`number \| undefined`

Attribute	multiple
Type	`boolean`
Default	`false`

Attribute	name
Type	`string \| undefined`
Default	`undefined`

Attribute	pattern
Type	`string \| undefined`
Default	`undefined`

Attribute	placeholder
Type	`string \| undefined`
Default	`undefined`

Attribute	readonly
Type	`boolean`
Default	`false`

Attribute	required
Type	`boolean`
Default	`false`

Attribute	step
Type	`number \| undefined`
Default	`undefined`

Attribute	type
Type	`InputType`

Type	`ValidityState`

Attribute	value
Type	`string`

Type	`HTMLInputElement`

Methods

checkValidity: 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.

Return boolean

Return	`boolean`

Events

change: Type Event
input: Type InputEvent
vsc-change deprecated: Type CustomEvent
vsc-input deprecated: Type CustomEvent

Type	`Event`

Type	`InputEvent`

Type	`CustomEvent`

Type	`CustomEvent`

Slots

content-after: A slot after the editable area but inside of the component. It is used to place icons.
content-before: A slot before the editable area but inside of the component. It is used to place icons.

Custom CSS Properties

--vscode-button-background

--vscode-button-foreground

--vscode-button-hoverBackground

--vscode-focusBorder

--vscode-font-family

--vscode-font-size

--vscode-font-weight

--vscode-input-placeholderForeground

--vscode-settings-textInputBackground

--vscode-settings-textInputBorder

--vscode-settings-textInputForeground