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