@jsdesign/jsd-pin-input

1.0.4 • Public • Published

<jsd-pin-input>

Simple input web-component to be use accross web irrespective of frameworks.

Installation

npm install @jsdesign/jsd-pin-input

Attributes

Name Type Default Description
id string '' Sets the id attribute for the input. Preferred when used inside forms.
name string '' Sets the name attribute for the input. Preferred when used inside forms.
type string 'text Allowed input type values: text, password, number
label string '' Label to display for the input.
disabled string -- When attribute is present, input is disabled cannot be interacted with.
required string -- When attribute is present, the input field is marked mandatory.
value string '' Sets the value property of the input. Can be used to set default value
autofocus string -- Sets the input autofocus attribute.
length string '4' Sets the length pf pin.
theme string 'light When attribute is present, the input will adapt to dark theme.
full-width string -- When attribute is present, the input will take full width of the container. By default the max-width is 300px.
error-msg string '' When error message string is provided, the input will be error themed and error message is displayed.
help-msg string '' When help message string is provided, help message is displayed.

Examples

Default Input

<jsd-pin-input></jsd-pin-input>

PIN Input with label and value

<jsd-pin-input id="name" name="name" label="name"></jsd-pin-input>

PIN Input with error

<jsd-pin-input id="error" name="error" label="error" error-msg='Name is required'></jsd-pin-input>

Full width PIN input

<jsd-pin-input id="error" name="error" label="error" full-width error-msg='Name is required'></jsd-pin-input>

Disabled PIN Input

<jsd-pin-input label='disabled' disabled type='text' value="1234"></jsd-pin-input>

<jsd-pin-input label='disabled' disabled type='text'></jsd-pin-input>

Cutomizable property list

Name Default
--color-primary #1eba68;
--color-primary-dark #1ba75e;
--color-secondary #f6f6f6;
--color-secondary-dark #efefef;
--color-secondary-darktheme rgba(255, 255, 255, 0.3);
--color-secondary-dark-darktheme rgba(255, 255, 255, 0.6);
--color-error #dd4421;
--color-error-background #ffebe6;
--color-placeholder #737373;
--color-placeholder-disabled #e0e0e0;
--color-placeholder-darktheme #e0e0e0;
--color-label #909090;
--color-black #2c2c2c;
--color-header-black #252525;
--color-header-tag #747373;
--color-white #ffffff;
--color-border #edebeb;
--border-radius 0.5rem;
--border-width 1px;
--border-width-hover 3px;
--label-spacing 0.2rem;
--label-case uppercase;
--label-font-size 0.8rem;
--button-font-weight 500;

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @jsdesign/jsd-pin-input

    Weekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • jayabratha