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

$3

1- install npm package

``sh
npm i jb-password-input
`

2- import module in one of your js in page

`js
import 'jb-password-input';

`

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

`html

`

$3

1- add script tag to your html file.

`HTML


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

`html

`

get/set value

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

set minimum length

`js
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.