https://github.com/substrate-system/text-input

Web component input
https://github.com/substrate-system/text-input

component input web webcomponent

Last synced: about 1 year ago
JSON representation

Web component input

• Host: GitHub
• URL: https://github.com/substrate-system/text-input
• Owner: substrate-system
• License: mit
• Created: 2024-07-06T06:15:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-26T05:18:54.000Z (about 1 year ago)
• Last Synced: 2025-04-15T00:44:58.954Z (about 1 year ago)
• Topics: component, input, web, webcomponent
• Language: TypeScript
• Homepage: https://substrate-system.github.io/text-input/
• Size: 50.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# text input

![tests](https://github.com/substrate-system/text-input/actions/workflows/nodejs.yml/badge.svg)

[![types](https://img.shields.io/npm/types/@substrate-system/text-input?style=flat-square)](README.md)

[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)

[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)

[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)

[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)

A text input web component.

[See a live demo](https://substrate-system.github.io/text-input/).

- [install](#install)

- [API](#api)

  * [ESM](#esm)

  * [Common JS](#common-js)

- [CSS](#css)

  * [Import CSS](#import-css)

  * [Customize CSS via some variables](#customize-css-via-some-variables)

- [use](#use)

  * [JS](#js)

  * [HTML](#html)

  * [pre-built JS](#pre-built-js)

## install

```sh

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

```

## API

This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).

### ESM

```js

import '@substrate-system/text-input'

```

### Common JS

```js

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

```

## CSS

### Import CSS

```js

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

```

Or minified:

```js

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

```

### Customize CSS via some variables

```css

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

```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

```html



    



```


### 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

```sh

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

```html

    

    

    Example

    

    

    

    

    

    

```