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