The disabled state of the component.
Control the validity of the control.
The label for the control.
The name attribute of the control.
Whether the control will have outlined appearance.
The placeholder attribute of the control.
The prompt symbol to use for unfilled parts of the mask.
Makes the control a readonly field.
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.Returns the HTMLFormElement associated with this element.
The mask pattern to apply on the input.
The mask pattern to apply on the input.
When set, makes the component a required field for validation.
A string containing the validation message of this element.
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
The value of the input.
Regardless of the currently set value-mode
, an empty value will return an empty string.
The value attribute of the control.
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
Invoked when the component is added to the document's DOM.
In connectedCallback()
you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback()
should be undone when the
element is disconnected, in disconnectedCallback()
.
A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules
Element
igc-mask-input
Slot
prefix - Renders content before the input
Slot
suffix - Renders content after the input
Slot
helper-text - Renders content below the input
Fires
igcInput - Emitted when the control receives user input
Fires
igcChange - Emitted when an alteration of the control's value is committed by the user
Csspart
container - The main wrapper that holds all main input elements
Csspart
input - The native input element
Csspart
label - The native label element
Csspart
prefix - The prefix wrapper
Csspart
suffix - The suffix wrapper
Csspart
helper-text - The helper text wrapper