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:
Include via HTML
Include it:
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
Attributes
Tiny Example:
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:
These can be overwritten easily by targetting the element. Example: