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.

Ger CoreUI PRO

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

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 />