Tjb-input NPM | npm.io

tjb-input

Webcomponents input (optionally with labelfield).

Features

easy to use
accessible
time saving

Example

https://tjb-webcomponents.github.io/tjb-input/

Add to project

You might want to use a Polyfill for WebComponent:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>

Include via HTML

Include it:

<script
  src="https://tjb-webcomponents.github.io/tjb-input/tjb-input.min.js"
  type="module"
></script>

Include via JavaScript

import 'https://tjb-webcomponents.github.io/tjb-input/tjb-input.min.js'

Include via NPM

Console:

npm i -S tjb-input

Then in your code:

import 'tjb-input';

Useage

<tjb-input></tjb-input>

Attributes

Tiny Example:

<tjb-input
  label="Password"
  type="password"
  name="password"
  info="minimum 8 digits"
  pattern=".{8,}"
  errormessage="please check this input"
></tjb-input>

All attributes:

attribute	example	description
label	label="Password"	the text of the corresponding label field.
type	type="password"	type of the input field
name	name="password"	name of the input field
info	info="minimum 8 digits	tiny info text shown besides the label
pattern	pattern=".{8,}"	regex pattern to check if input is valid
errormessage	errormessage="please check your password"	message to display if input is invalid
successmessage	successmessage="√"	message to display if input is valid
required	required="true"	add required flag to input
nosubmit	nosubmit="true"	whether or not the nearest form feald should be submitted on enter key
value	value="foo"	sets the value of the input field

Methods

method	properties	example	description
showMessage	- type (@String) 'error' / 'success'	`tjbInput.showMessage("error")`	displays the respective border color and message text
hideMessage	-	`tjbInput.hideMessage()`	hides border color and message text
checkValidity	-	`tjbInput.checkValidity()`	checks whether or not the input field is valid. Displays the success message if so and the error message if not
submit	-	`tjbInput.submit()`	submits the nearest form element if input is valid
focus	-	`tjbInput.focus()`	focus the input node

events

event	description
change	when the value of the input field is changed

Styling

Default public values:

:host {
  --input-color-error: #fa354c;
  --input-color-success: limegreen;
  --input-padding: 10px;
  --input-margin: 0 0 30px 0;
  --input-width: 100%;
  --input-border: 1px solid transparent;
  --input-border-bottom: 1px solid lightgrey;
  --input-border-radius: 0;
  --input-font-size: 1rem;
  --input-info-color: grey;
  --input-info-font-size: 0.8rem;
  --input-label-margin: 0 0 5px 0;
}

These can be overwritten easily by targetting the element. Example: