React Password Input Component API

Password Input API

Explore the API reference for the React Password Input component and discover how to effectively utilize its props for customization.

On this page

CPasswordInput#

import { CPasswordInput } from '@coreui/react-pro'
// or
import CPasswordInput from '@coreui/react-pro/src/components/password-input/CPasswordInput'

Property	Default	Type
ariaLabelToggler#	`Toggle password visibility`	`string`
Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`.
className#	-	`string`
A string of all className you want applied to the component.
delay#	`false`	`number`, `boolean`
Enables delayed `onChange` execution for improved performance in React password inputs. `true` delays the `onChange` callback by 500ms. You can also pass a custom delay (in milliseconds) as a number.
disabled#	-	`boolean`
Disables the password input field. When `true`, the user cannot interact with the field.
feedback#4.2.0+	-	`ReactNode`
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	-	`ReactNode`
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	-	`ReactNode`
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
floatingClassName#4.5.0+	-	`string`
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	-	`ReactNode`
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
invalid#	-	`boolean`
Set component validation state to invalid.
label#4.2.0+	-	`ReactNode`
Add a caption for a component.
onChange#	-	`ChangeEventHandler<HTMLInputElement>`
Callback triggered when the value of the password input changes. If `delay` is set, the callback is called after the specified timeout.
readOnly#	-	`boolean`
Makes the React password input read-only. Prevents user input but allows text selection.
showPassword#	`false`	`boolean`
Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows toggling password visibility in React forms.
size#	-	`'sm'`, `'lg'`
Sets the visual size of the password input. Use `'sm'` for small or `'lg'` for large input fields.
text#4.2.0+	-	`ReactNode`
Add helper text to the component.
tooltipFeedback#4.2.0+	-	`boolean`
Display validation feedback in a styled tooltip.
valid#	-	`boolean`
Set component validation state to valid.
value#	-	`string`, `number`, `string[]`
The value of the password input field. To make the input controlled, pair this with the `onChange` handler.