React Password Input Component

Password Input

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Get CoreUI PRO

A fully customizable React password input component with Bootstrap styling. Includes toggle visibility, validation, sizing options, and accessibility support.

Available in Other JavaScript Frameworks

CoreUI React Password Input Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Example#

The <CPasswordInput /> is a fully featured React password input field built with Bootstrap and CoreUI. It includes built-in password visibility toggling, sm / lg sizing options, and support for disabled, readOnly, and form validation states. Ideal for login forms, signup screens, and any secure input in your React app.

Sizing#

Use the size prop to control the height and padding of the input. Available options:

size="sm" – small input
size="lg" – large input

Disabled#

Add the disabled attribute to make the password input uneditable. This also dims the field to indicate it's inactive.

Readonly#

Use the readOnly prop to make the input non-editable while still allowing the text to be copied. Unlike disabled, it keeps the default cursor.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CPasswordInput />