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:

tjb-input {
  --input-width: 300px;
}

Enjoy