tjb-input

    0.3.13 • Public • Published

    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

    Typewriter Gif

    Install

    npm i tjb-input

    DownloadsWeekly Downloads

    1

    Version

    0.3.13

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • thibaultjanbeyer