Components / Library Version 5.5.0
Input
The Input component provides an accessible text input field. See properties for all functionality.
* Required property
label *
string
A description for the component. For accessibility reasons it is required even when
label-position
is set to none
.
character-limit
number
The maximum number of characters the user can type. The character count and limit will be displayed on the right
side of the field. Character limiting is disabled when this property is unset.
disabled
boolean
Disables the component.
error-message
string
Set this string to display an error message.
info
string
Set the info text displayed under the input field.
input-width
string: CSS width value
Set the width of the input independently of the width of the component so that label, info text or error message can
be wider than the input. Defaults to 100%.
is-submit
boolean
Allows the input to submit a form.
label-position
top | left | none
Defaults to
top
. Set to none
if no label should be displayed.min
number
For use with
type="number"
, the minimum value that can be reached using the stepper.
max
number
For use with
type="number"
, the maximum value that can be reached using the stepper.
placeholder
string
Set the placeholder text within the input field.
required-field
boolean
Set this property to indicate this input as required.
step
number
For use with
type="number"
, the interval used when stepping between values.symbol-before
string
Display the string before the value (e.g. "$").
symbol-after
string
Display the string after the value (e.g. "%").
text-after
string
Display the string after the input. This text should be no longer than 55 characters.
type
text | number
The input's type, defaults to
text
.value
string
The value to initially set the input field, or the input field's current value.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Javascript Sample
Example code for functionality.
Usage in Elm
Code generated from HTML.
wmInputValueChanged
Emitted on blur when Input's value changes.
input
Emitted when a user types in the input field.
Screen Reader
Error messages will be announced via an ARIA live region. If the info
property is present, info text will be read upon focusing the input field.