Customized built-in elements <password-toggle>

The goal of this module is to have a reusable component to toggle password from password type to text type.

• Demo

Install

npm i @gastier/customelement-passwordtoggle

Usage

To attach toggle button to input, use input attribute to list name password attribute.

<-- Create a simple toggle button  -->
<input type="password" name="password"/>
<password-toggle input="password"></password-toggle>

<-- Create a toggle button link to multiple input -->
<input type="password" name="password"/>
<input type="password" name="confirm"/>
<password-toggle input="password,confirm"></password-toggle>

<-- Restricted button for device screen > 800px -->
<input type="password" name="password"/>
<password-toggle input="password" resolution-min="800"></password-toggle>

Attributes

| Attribute | Type | Description | |------------------|----------|--------------------------------------------------------------| | input | string | Name of input name attribute (separate by comma if multiple) | | resolution-min | int | Number of pixels minimal to render custom element |