A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules

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).

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

Callable

  • Returns ReactNode

Events

onChange: (args: CustomEvent<string>) => void

Emitted when an alteration of the control's value is committed by the user

Type declaration

onInput: (args: CustomEvent<string>) => void

Emitted when the control receives user input

Type declaration

Properties

mask: string

The mask pattern to apply on the input.

value: string

The value of the input.

Regardless of the currently set value-mode, an empty value will return an empty string.

Dictates the behavior when retrieving the value of the control:

  • raw will return the clean user input.
  • withFormatting will return the value with all literals and prompts.