Directory

← Back

text-input

input for text

Author

Contributors

Rating

Published on NPM Published on webcomponents.org

API & Demo

<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

License

MIT

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @fooloomanzoo/input-picker-pattern#^3.0.10
  • @polymer/polymer#^3
Released
2018-11-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent
Online