Have your say in our Mesh survey
Skip to content

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.


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.


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

Interactive demo



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.


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