<text-input>
An input for text values.
Motivation
The normal input with type="text" is fairly good to use, but it has some flaws, because it should if wanted e.g.:
- guarantee live-value to be valid
- to be styled easily
- auto resize on input
Example
<p>
hex-color: <text-input id="hex" value="{{value}}" input="{{input}}" default="#111" required pattern="^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" size="7" maxlength="7" minlength="4"></text-input>
</p>
<p>pattern: <b>^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$</b></p>
<p>input: <b>[[input]]</b></p>
<p>value: <b>[[value]]</b></p>Styling
Have a look at input-picker-pattern#input-shared-style to see how to style the element.
Installation
npm i @fooloomanzoo/text-input