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 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"prompt
Section titled "prompt"The prompt symbol to use for unfilled parts of the mask pattern.
prompt: stringvalue
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"isValidMaskPattern
Section titled "isValidMaskPattern"Returns whether the current masked input is valid according to the mask pattern.
isValidMaskPattern(): booleanReturns boolean
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>