jb-password-input

this superset component on jb-input , just for password input with following benefits:

• all jb-input benefits include customizations, validation,...
• show password toggle button to let user see inputted password.
• ready to use password validation like minimum length.

using with JS frameworks

to use this component in react see jb-password-input/react;

install

using npm

1- install npm package

npm i jb-password-input

2- import module in one of your js in page

import 'jb-password-input';

3- use component in your html or jsx file like any other html tag

<jb-password-input label="password:" message="subtitle of input box"></jb-password-input>

using cdn

1- add script tag to your html file.

<script src="https://unpkg.com/jb-input/dist/jb-input.umd.js"></script>
<script src="https://unpkg.com/jb-password-input/dist/jb-password-input.umd.js"></script>

2- use web component like any other html tag whenever you need

<div class="some-app-div">
  <jb-password-input label="password:" message="subtitle of input box"></jb-password-input>
</div>

get/set value

//get value
const inputValue = document.getElementByTagName('jb-password-input').value;
//set value
document.getElementByTagName('jb-password-input').value = "new string";

set minimum length

document.getElementByTagName('jb-password-input').minLength = 8;

You can also set your own validation but we put this option for ease of use.

set custom style

in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component. since jb-payment-input use jb-input underneath, read jb-input custom style list.

Other Related Docs:

• see jb-password-input/react if you want to use this as a React component.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.