A highly customizable single-line text field for entering and editing data, with support for prefix/suffix content, helper text, form integration, and built-in validation.
Slots
prefix — Renders content before the input.
suffix — Renders content after input.
helper-text — Renders content below the input.
value-missing — Renders content when the required validation fails.
type-mismatch — Renders content when the url/email type validation fails.
pattern-mismatch — Renders content when the pattern validation fails.
too-long — Renders content when the maxlength validation fails.
too-short — Renders content when the minlength validation fails.
range-overflow — Renders content when the max validation fails.
range-underflow — Renders content when the min validation fails.
step-mismatch — Renders content when the step validation fails.
custom-error — Renders content when setCustomValidity(message) is set.
invalid — Renders content when the component is in invalid state (validity.valid = false).
CSS Parts
container — The main wrapper that holds all main input elements.
input — The native input element.
label — The native label element.
prefix — The prefix wrapper.
suffix — The suffix wrapper.
helper-text — The helper text wrapper.

Properties

Section titled "Properties"

autocomplete

Section titled "autocomplete"

A hint for the browser on how to autofill the control.

 
autocomplete: string

autofocus

Section titled "autofocus"

Whether the control should receive focus automatically.

 
autofocus: boolean

inputMode

Section titled "inputMode"

A hint to the browser for which virtual keyboard layout to display. See relevant MDN article

 
inputMode: string

label

Section titled "label"

The label for the control.

 
label: string

max

Section titled "max"

The maximum value the control accepts.

 
max: number | undefined

maxLength

Section titled "maxLength"

The maximum string length of the control.

 
maxLength: number | undefined

min

Section titled "min"

The minimum value the control accepts.

 
min: number | undefined

minLength

Section titled "minLength"

The minimum string length required by the control.

 
minLength: number | undefined

outlined

Section titled "outlined"

Whether the control will have outlined appearance.

 
outlined: boolean

pattern

Section titled "pattern"

The regular expression the value is validated against.

 
pattern: string | undefined

placeholder

Section titled "placeholder"

The placeholder text of the control.

 
placeholder: string

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean

step

Section titled "step"

The granularity the value must adhere to.

 
step: number | undefined

type

Section titled "type"

The type of the control.

 
type: InputType

validateOnly

Section titled "validateOnly"

Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property for string-type inputs or allows spin buttons to exceed the predefined min/max limits for number-type inputs.

 
validateOnly: boolean

value

Section titled "value"

The value of the control.

 
value: string

Methods

Section titled "Methods"

blur

Section titled "blur"

Removes focus from the control.

 
blur(): void

Returns void

focus

Section titled "focus"

Sets focus on the control.

 
focus(options: FocusOptions): void

Parameters

  • options: FocusOptions

Returns void

select

Section titled "select"

Selects all the text inside the input.

 
select(): void

Returns void

setRangeText

Section titled "setRangeText"

Replaces the selected text in the input.

 
setRangeText(replacement: string, start: number, end: number, selectMode: RangeTextSelectMode): void

Parameters

Returns void

setSelectionRange

Section titled "setSelectionRange"

Sets the text selection range of the control

 
setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): void

Parameters

Returns void

stepDown

Section titled "stepDown"

Decrements the numeric value of the input by one or more steps.

 
stepDown(n: number): void

Parameters

  • n: number

Returns void

stepUp

Section titled "stepUp"

Increments the numeric value of the input by one or more steps.

 
stepUp(n: number): void

Parameters

  • n: number

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted when the value of the control is committed.

 
onChange(args: CustomEvent<string>): void

Parameters

Returns void

onInput

Section titled "onInput"

Emitted when the control input receives user input.

 
onInput(args: CustomEvent<string>): void

Parameters

Returns void