The Input component provides an accessible text input field. See properties for all functionality.
* Required property
label-positionis set to none (for accessibility reasons).
top | left | none
top. Set to
noneif no label should be displayed.
text | number
type="number", the minimum value that can be reached using the stepper.
type="number", the maximum value that can be reached using the stepper.
type="number", the interval used when stepping between values.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
Error messages will be announced via live-region. If the
info property is present, info text will be read upon focusing the input field.
prevent validation prop is used with a specific use-case in mind.
When components that feature required fields are initally focused within a modal, closing the modal will flash the required error.
prevent validation prop is useful in this case, where the close button's id can be passed through preventing the validation flash.