@fredxd/passwordtoggle

0.0.9 • Public • Published

Custom element - Password Toggle

npm

Attach toogle password behavior with this custom element.

Installation

With npm

npm i @fredxd/passwordtoggle

Or yarn

yarn add @fredxd/passwordtoggle

Usage

To attach toggle behavior to input, add is="toggle-password" to your password input

<input type="password" is="toggle-password" />

Attributes

You can pass some parameters via data attributes

Attribute Type Description
data-show-text string Text rendered in input to show password
data-hide-text string Text rendered in input to hide password
data-display-icon string or bool You can display icon instead of text
data-icon-show string Path of your "show" icon (local path or url)
data-icon-hide string Path of your "hide" icon (local path or url)

Styles

Input is encapsulate in shadow dom container. You can override some css var in order to apply your style. You can change css variable for .toggle-password-container

Css var Type Default value Description
--toggle-password-background-color color transparent Change color of background for toggle element
--toggle-password-color color #000 Change color of text or icon
--toggle-password-width unit 40px Set width of toggle element
--toggle-password-padding unit 5px Set horizontal padding of toggle element
--toggle-password-icon-width unit 24px Height of toggle icon
--toggle-password-icon-height unit 24px Width of toggle icon
--toggle-password-focused-color color #000 Change color of text or icon when input is focused
--toggle-password-disabled-color color #000 Change color of text or icon when input is disabled
--toggle-password-invalid-color color #000 Change color of text or icon when input has class "is-invalid"
--toggle-password-filled-color color #000 Change color of text or icon when input is filled

Package Sidebar

Install

npm i @fredxd/passwordtoggle

Weekly Downloads

2

Version

0.0.9

License

MIT

Unpacked Size

14.1 kB

Total Files

4

Last publish

Collaborators

  • fredxd