AXA Input Text
The <axa-input-text> component is a wrapper for the HTML <input> element with custom styling and additional functionality.
It accepts most of the same properties as HTML <input>, but with type
restricted to type=text
, type=email
, or type=password
.
Properties
type
The type of input element to display.
Attribute | Details |
---|---|
type="text" |
(default) |
type="email" |
|
type="password" |
Password |
label
The string-valued label
provides the label text as HTML.
Note: The application is responsible for sanitizing HTML!
refId
The string-valued refId
sets the reference ID for label and input. If no refId
is set, a random ID will be created.
name
The string-valued name
of the element can be set for purposes of form submission.
Note: See the specification for further details.
maxLength
Numeric maxLength
, when defined, restricts the number of characters a user can enter. The underlying native <input> enforces maxLength
by blocking user input when the character limit is exceeded.
The remaining characters are always displayed to the user, if maxLength
and counter
is provided.
The UI's remaining-characters message (see counter
) will however use maxLength - 1
internally to be able to provide advance warning when 0 characters remain. Upon hitting the character limit proper the 'character limit reached!' error message (see counterMax
) is displayed instead.
counter
String-valued counter
defines the UI's remaining-characters message in conjunction with maxLength
.
Valid counter
values are:
- the empty string, which will cause that character count not to be displayed.
- a nonempty string suffix, which will be appended to the remaining character count
- a string template containing "##counter##", so that e.g. "still ##counter## characters left" will result in instantiated text like "still 9 characters left".
counterMax
String-valued counterMax
defines the validation error message that the user will see upon reaching maxLength
characters.
required
The Boolean attribute required
visualizes an element that must obligatorily be filled by the user. When set to true, the element displays *
after the label text.
placeholder
The string-valued placeholder
specifies the placeholder text shown when the element is empty.
invalid
The Boolean attribute invalid
serves to indicate the validity of the element (default: false
). If set to true
it sets the element into a visual error state.
checkMark
The Boolean attribute checkMark
, when set to true, shows an animated check mark to the right of the input (default: false
).
value
The string-valued value
sets the value of the underlying native HTML <input>
defaultValue
The string-valued defaultValue
can only be used for React.
Like value
, it sets the value of the underlying native HTML <input> — but only once, on first render.
disabled
The Boolean attribute disabled
disables the underlying native HTML <input> text.
readonly
The Boolean readonly
attribute, when present, makes the underlying native HTML <input> text not mutable, meaning the user can not edit the control.
error
The string-valued error
provides error text as HTML.
This is the text shown when invalid
is true.
info
The string-valued info
provides the label text as HTML.
Note: The application is responsible for sanitizing HTML!
pattern
It is a string value. But just input a valid RegEx. Useful to open up numeric keyboard on iOS touch devices. See official HTML documentation for details.
Default: .*
. This RegEx do not restrict any input. An empty string at this point causes errors on form validation, because it just allows to input a empty string.
inputmode
It is a string value. Useful to open up numeric keyboard on touch devices. See official HTML documentation for details.
autofocus
The Boolean attribute autofocus, when true, sets keyboard focus on the underlying native <input> element after initial rendering of the component.
currency
You can set the currency
attribute to a valid ISO 4217 currency code string. When set, <input-text> formats the input whenever the onBlur
event of its internal input element fires, and also upon setting value
programmatically. Note that the locale "style" remains fixed to de-CH
.
Currency formatting is only active when attribute type
is set to text
. The formatter does not accept values which are either only letters ("one hundred") or have more than one decimal separator ("12.30.1").
Please be mindful of using currency formatting in combination with maxLength
. The result of formatting could exceed the limits of maxLength
!
autocomplete
The boolean attribute autocomplete
put the HTML autocomplete attribute to "on". The default ist "off"
Callbacks
onChange
The function-valued property onChange
can be used as a callback prop for React and other frameworks.
If you are a Typescript user, you must say that the InputEvent target is an input element. (event.target as HTMLInputElement).value
Its first argument is the original change
event from the element's underlying native <input> field.
The second argument is a Boolean flag invalidFormat
which is true if, and only if, the user's input cannot be formatted as a currency.
onFocus
The function-valued property onFocus
can be used as a callback prop for React and other frameworks.
Its only argument is the original focus
event from the element's underlying native <input> field.
onBlur
The function-valued property onBlur
can be used as a callback prop for React and other frameworks.
Its only argument is the original blur
event from the element's underlying native <input> field.
onKeyDown
The function-valued attribute onKeyDown
can be used as a callback prop for React and other frameworks.
The callback is invoked once for every user key down on the inputfield.
onKeyUp
The function-valued attribute onKeyUp
can be used as a callback prop for React and other frameworks.
The callback is invoked once for every user key up on the inputfield.
onPaste
The paste event is fired when the user has initiated a "paste" action through the browser's user interface.
Methods
focus()
The focus()
method focusses the underlying native HTML <input>.
Its UI consequences are the same as a keyboard/mouse-initiated focus.
blur()
The blur()
method unfocusses the underlying native HTML <input>.
Its UI consequences are the same as a keyboard/mouse-initiated blur.