Skip to content
Mesh
3.1.3

Password Textbox

A password textbox is a text box that conceals the characters typed into it for the purpose of privacy. A password box looks like a textbox, except that it renders placeholder characters in place of the text that has been entered. Below is a default password input textbox.

Installation

bash
npm install @nib-components/password-textbox

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx
import PasswordTextbox from '@nib-components/password-textbox';

Interactive demo

jsx

Props

As the <PasswordTextbox/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

The PasswordTextbox is an extension of Textbox, therefore, all of the parent props are valid for this component.

All props passed directly to <PasswordTextbox/> will be applied to the underlying <input> as attributes.

Considerations

Use a password textbox to collect a password or other private data.