A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules
- Slots
-
prefix— Renders content before the input -
suffix— Renders content after the input -
helper-text— Renders content below the input -
value-missing— Renders content when the required validation fails. -
bad-input— Renders content when a required mask pattern 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 elementsinput— The native input elementlabel— The native label elementprefix— The prefix wrappersuffix— The suffix wrapperhelper-text— The helper text wrapper
Properties
Section titled "Properties"label
Section titled "label"The label for the control.
label: stringThe masked pattern of the component.
mask: stringThe masked pattern of the component.
mask: stringoutlined
Section titled "outlined"Whether the control will have outlined appearance.
outlined: booleanplaceholder
Section titled "placeholder"The placeholder attribute of the control.
placeholder: stringprompt
Section titled "prompt"The prompt symbol to use for unfilled parts of the mask pattern.
prompt: stringprompt
Section titled "prompt"The prompt symbol to use for unfilled parts of the mask pattern.
prompt: stringreadOnly
Section titled "readOnly"Makes the control a readonly field.
readOnly: booleanvalue
Section titled "value"The value of the input.
Regardless of the currently set value-mode, an empty value will return an empty string.
value: stringvalueMode
Section titled "valueMode"Dictates the behavior when retrieving the value of the control:
raw: Returns clean input (e.g. "5551234567")withFormatting: Returns with mask formatting (e.g. "(555) 123-4567")
Empty values always return an empty string, regardless of the value mode.
valueMode: MaskInputValueModeMethods
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
isValidMaskPattern
Section titled "isValidMaskPattern"Returns whether the current masked input is valid according to the mask pattern.
isValidMaskPattern(): booleanReturns boolean
select
Section titled "select"Selects all the text inside the input.
select(): voidReturns void
setRangeText
Section titled "setRangeText"Replaces the selected text in the control and re-applies the mask
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
Events
Section titled "Events"onChange
Section titled "onChange"Emitted when an alteration of the control's value is committed by the user
onChange(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>
Returns void
onInput
Section titled "onInput"Emitted when the control receives user input
onInput(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>