Components / Library Version 4.5.0

Input

The Input component provides an accessible text input field. See properties for all functionality.

PropertiesExamplesAPIAccessibility

* Required property

label *
string
A description for the input. Required even if the label-position is set to none (for accessibility reasons).
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 live-region. If the info property is present, info text will be read upon focusing the input field.