/text-input

Web component input

Primary LanguageTypeScriptMIT LicenseMIT

text input

tests types module semantic versioning dependencies license

A text input web component.

See a live demo.

install

npm i -S @substrate-system/text-input

API

This exposes ESM and common JS via package.json exports field.

ESM

import '@substrate-system/text-input'

Common JS

require('@substrate-system/text-input')

CSS

Import CSS

import '@substrate-system/text-input/css'

Or minified:

import '@substrate-system/text-input/css/min'

Customize CSS via some variables

text-input {
    --text-input-error-border: pink;
    --gray-text: #999999;
    --radius: 4px;
}

use

This calls the global function customElements.define. Just import, then use the tag in your HTML.

JS

import '@substrate-system/text-input'
import '@substrate-system/text-input/css'

Note

The name attribute is used as an id also, so it should be unique per page.

HTML

<div>
    <text-input
        display-name="text input component"
        title="At least 3 letters, but less than 7"
        required
        minlength=3
        maxlength=7
        name="text-input"
    ></text-input>
</div>

pre-built JS

This package exposes minified files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/text-input/dist/index.min.js ./public/text-input.js
cp ./node_modules/@substrate-system/text-input/dist/style.min.css ./public/text-input.css

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <!-- CSS -->
    <link rel="stylesheet" href="./text-input.css">
</head>

<body>
    <!-- use the tag -->
    <text-input
        display-name="text input component"
        title="At least 3 letters, but less than 7"
        required
        minlength=3
        maxlength=7
        name="text-input"
    ></text-input>

    <!-- JS -->
    <script type="module" src="./text-input.js"></script>
</body>
</html>