- 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 a type url/email input pattern 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"The autocomplete attribute of the control.
autocomplete: stringautofocus
Section titled "autofocus"The autofocus attribute of the control.
autofocus: booleaninputMode
Section titled "inputMode"The input mode attribute of the control. See relevant MDN article
inputMode: stringlabel
Section titled "label"The label for the control.
label: stringThe max attribute of the control.
max: numbermaxLength
Section titled "maxLength"The maximum string length of the control.
maxLength: numberThe min attribute of the control.
min: numberminLength
Section titled "minLength"The minimum string length required by the control.
minLength: numberoutlined
Section titled "outlined"Whether the control will have outlined appearance.
outlined: booleanpattern
Section titled "pattern"The pattern attribute of the control.
pattern: stringplaceholder
Section titled "placeholder"The placeholder attribute of the control.
placeholder: stringreadOnly
Section titled "readOnly"Makes the control a readonly field.
readOnly: booleanThe step attribute of the control.
step: numberThe type attribute of the control.
type: InputTypevalidateOnly
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: booleanvalue
Section titled "value"The value of the control.
value: stringMethods
Section titled "Methods"Removes focus from the control.
blur(): voidReturns void
focus
Section titled "focus"Sets focus on the control.
focus(options: FocusOptions): voidParameters
- options:
FocusOptions
Returns void
select
Section titled "select"Selects all the text inside the input.
select(): voidReturns void
setRangeText
Section titled "setRangeText"Replaces the selected text in the input.
setRangeText(replacement: string, start: number, end: number, selectMode: RangeTextSelectMode): voidParameters
- replacement:
string - start:
number - end:
number - selectMode:
RangeTextSelectMode
Returns void
setSelectionRange
Section titled "setSelectionRange"Sets the text selection range of the control
setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): voidParameters
- start:
number - end:
number - direction:
SelectionRangeDirection
Returns void
stepDown
Section titled "stepDown"Decrements the numeric value of the input by one or more steps.
stepDown(n: number): voidParameters
- n:
number
Returns void
stepUp
Section titled "stepUp"Increments the numeric value of the input by one or more steps.
stepUp(n: number): voidParameters
- n:
number
Returns void
Events
Section titled "Events"onChange
Section titled "onChange"Emitted when the control's checked state changes.
onChange(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>
Returns void
onInput
Section titled "onInput"Emitted when the control input receives user input.
onInput(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>