React Password Input Component

Password Input

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.

import React from 'react'
import { CForm } from '@coreui/react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputExample = () => {
  return (
    <CForm>
      <div className="mb-4">
        <CPasswordInput label="Password" placeholder="Enter your password" />
      </div>
      <div>
        <CPasswordInput
          label="Password with value"
          placeholder="Enter your password"
          defaultValue="Top secret"
        />
      </div>
    </CForm>
  )
}

import React from 'react'
import { CForm } from '@coreui/react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputExample = () => {
  return (
    <CForm>
      <div className="mb-4">
        <CPasswordInput label="Password" placeholder="Enter your password" />
      </div>
      <div>
        <CPasswordInput
          label="Password with value"
          placeholder="Enter your password"
          defaultValue="Top secret"
        />
      </div>
    </CForm>
  )
}

With form field

Wrap the control in <CFormField> to lay it out with its label and description, and to get validation feedback in the right place.

import React from 'react'
import { CFormField, CFormLabel, CFormText } from '@coreui/react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputFormFieldExample = () => {
  return (
    <CFormField>
      <CFormLabel htmlFor="passwordInputField">Password</CFormLabel>
      <CPasswordInput id="passwordInputField" placeholder="Enter your password" />
      <CFormText>At least 12 characters.</CFormText>
    </CFormField>
  )
}

import React from 'react'
import { CFormField, CFormLabel, CFormText } from '@coreui/react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputFormFieldExample = () => {
  return (
    <CFormField>
      <CFormLabel htmlFor="passwordInputField">Password</CFormLabel>
      <CPasswordInput id="passwordInputField" placeholder="Enter your password" />
      <CFormText>At least 12 characters.</CFormText>
    </CFormField>
  )
}

Sizing

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

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

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputSizingExample = () => {
  return (
    <>
      <CPasswordInput size="lg" placeholder="Large password input" aria-label="lg input example" />
      <CPasswordInput placeholder="Default password input" aria-label="default input example" />
      <CPasswordInput size="sm" placeholder="Small password input" aria-label="sm input example" />
    </>
  )
}

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputSizingExample = () => {
  return (
    <>
      <CPasswordInput size="lg" placeholder="Large password input" aria-label="lg input example" />
      <CPasswordInput placeholder="Default password input" aria-label="default input example" />
      <CPasswordInput size="sm" placeholder="Small password input" aria-label="sm input example" />
    </>
  )
}

Disabled

Add the disabled attribute to make the password input uneditable. This also dims the field to indicate it’s inactive. The visibility toggle is disabled with it and leaves the tab order, so it can’t change what a disabled field shows: a password revealed before stays visible, and can be hidden once the field is enabled again.

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputDisabledExample = () => {
  return (
    <>
      <CPasswordInput
        placeholder="Disabled password input"
        aria-label="Disabled password input example"
        disabled
      />
      <CPasswordInput
        placeholder="Disabled readonly password input"
        aria-label="Disabled password input example"
        disabled
        readOnly
      />
    </>
  )
}

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputDisabledExample = () => {
  return (
    <>
      <CPasswordInput
        placeholder="Disabled password input"
        aria-label="Disabled password input example"
        disabled
      />
      <CPasswordInput
        placeholder="Disabled readonly password input"
        aria-label="Disabled password input example"
        disabled
        readOnly
      />
    </>
  )
}

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.

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputReadonlyExample = () => {
  return (
    <CPasswordInput
      placeholder="Readonly password input"
      aria-label="Readonly password input example"
      defaultValue="Readonly input here..."
      readOnly
    />
  )
}

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputReadonlyExample = () => {
  return (
    <CPasswordInput
      placeholder="Readonly password input"
      aria-label="Readonly password input example"
      defaultValue="Readonly input here..."
      readOnly
    />
  )
}

Floating labels

Set floatingLabel and the component renders the label itself — no wrapper markup needed — and the text also becomes the field’s accessible name; the toggle button rides along with the field, and the placeholder stays hidden until the label floats.

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputFloatingLabelExample = () => (
  <CPasswordInput floatingLabel="Password" id="floatingPasswordInput" />
)

import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputFloatingLabelExample = () => (
  <CPasswordInput floatingLabel="Password" id="floatingPasswordInput" />
)

Set floatingLabelAlways to keep the label always floating with the placeholder showing.

Controlled and uncontrolled visibility

Added in v6.0.0

The visibility toggle works either way, and the prop you reach for is what picks the mode.

	prop	who owns the visibility
Uncontrolled	`defaultShowPassword`	the input, from that starting point
Controlled	`showPassword`	your component

onShowPasswordChange fires in both modes with the requested state — so you can watch the toggle without taking it over.

Uncontrolled

defaultShowPassword seeds the toggle — the input starts revealed and manages itself from there. Every example above leaves it out and starts hidden.

<CPasswordInput defaultShowPassword label="Password" />

Controlled

Pass showPassword and the input renders the type you pass — the toggle button only fires onShowPasswordChange. Feed the change back, or nothing flips.

const [visible, setVisible] = useState(false)

<CPasswordInput label="Password" onShowPasswordChange={setVisible} showPassword={visible} />

API

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

<CPasswordInput />