Hire Us Get CoreUI PRO all-access →

Bootstrap 5 Password Input

Password Input

Markdown ChatGPT Claude
CoreUI PRO
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

Enhance your password input fields in Bootstrap with custom styles, sizing options, toggle visibility button, and more.

Available in Other JavaScript Frameworks

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

On this page

Example

Use the form-password wrapper to add a visibility toggle button to standard Bootstrap password input fields.

html 
<div class="mb-3">
  <label for="examplePasswordInput1" class="form-label">Password</label>
  <div class="form-password">
    <input type="password" class="form-control" id="examplePasswordInput1" placeholder="Enter your password">
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
  </div>
</div>
<div class="mb-3">
  <label for="examplePasswordInput2" class="form-label">Password with value</label>
  <div class="form-password">
    <input type="password" class="form-control" id="examplePasswordInput2" placeholder="Enter your password" value="Top secret">
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
  </div>
</div>

Sizing variants

Bootstrap Password Input supports different sizes using Bootstrap’s sizing utilities like .form-control-lg and .form-control-sm.

html 
<div class="form-password">
  <input type="password" class="form-control form-control-lg" placeholder="Large password input">
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
</div>
<div class="form-password">
  <input type="password" class="form-control" placeholder="Default password input">
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
</div>
<div class="form-password">
  <input type="password" class="form-control form-control-sm" placeholder="Small password input">
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
</div>

Disabled state

To make a Bootstrap Password Input non-interactive, add the disabled attribute to the <input /> and the toggle <button>.

html 
<div class="form-password">
  <input type="password" class="form-control" placeholder="Disabled password input" disabled>
  <button type="button" class="form-password-action" data-coreui-toggle="password" disabled aria-label="Toggle password visibility">
    <span class="form-password-action-icon"></span>
  </button>
</div>
<div class="form-password">
  <input type="password" class="form-control" placeholder="Disabled and readonly input" disabled readonly>
  <button type="button" class="form-password-action" data-coreui-toggle="password" disabled aria-label="Toggle password visibility">
    <span class="form-password-action-icon"></span>
  </button>
</div>

Readonly state

Use the readonly attribute to make the input non-editable but still selectable. This is useful for displaying values without allowing user changes.

html 
<div class="form-password">
  <input type="password" class="form-control" placeholder="Readonly password input" value="Readonly input here..." readonly>
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
</div>

Usage

Via data attributes, the password input plugin toggles visibility of the password by toggling the type of input field. Add data-coreui-toggle="password" to the button to toggle a password visibility.

<div class="form-password">
  <input type="password" class="form-control" placeholder="Readonly password input" value="Readonly input here..." readonly>
    <button type="button" class="form-password-action" data-coreui-toggle="password" aria-label="Toggle password visibility">
      <span class="form-password-action-icon"></span>
    </button>
</div>

Customization options

SASS variables

Customize the appearance of the Bootstrap Password Input using the following SASS variables:

Variables prefixed with $input-* are shared across most Bootstrap form controls.

scss 
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;

$input-bg:                              var(--cui-body-bg) !default;
$input-disabled-color:                  var(--cui-body-color) !default;
$input-disabled-bg:                     var(--cui-secondary-bg) !default;
$input-disabled-border-color:           var(--cui-border-color) !default;

$input-color:                           var(--cui-body-color) !default;
$input-border-color:                    var(--cui-border-color) !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      var(--cui-box-shadow-inset) !default;

$input-border-radius:                   var(--cui-border-radius) !default;
$input-border-radius-sm:                var(--cui-border-radius-sm) !default;
$input-border-radius-lg:                var(--cui-border-radius-lg) !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              tint-color($primary, 50%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               var(--cui-secondary-color) !default;
$input-plaintext-color:                 var(--cui-body-color) !default;

$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-color-width:                      3rem !default;

Variables like $form-password-* apply specifically to password input wrappers.

scss 
$form-password-action-bg:         transparent !default;
$form-password-action-hover-bg:   var(--cui-tertiary-bg) !default;
$form-password-icon-show:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M256%2C144.927A103.309%2C103.309%2C0%2C1%2C0%2C359.309%2C248.236%2C103.426%2C103.426%2C0%2C0%2C0%2C256%2C144.927Zm0%2C174.618a71.309%2C71.309%2C0%2C1%2C1%2C71.309-71.309A71.39%2C71.39%2C0%2C0%2C1%2C256%2C319.545Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223c-77.75-77.749-204.258-77.749-282.008%2C0L16%2C233.79v28.893l98.778%2C102.689.218.222a199.409%2C199.409%2C0%2C0%2C0%2C282.008%2C0l99-102.911V233.79ZM464%2C249.79l-89.732%2C93.285a167.409%2C167.409%2C0%2C0%2C1-236.536%2C0L48%2C249.79v-3.107L137.729%2C153.4c65.247-65.13%2C171.3-65.13%2C236.542%2C0L464%2C246.683Z%22%20class%3D%22ci-primary%22/%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20x%3D%22240%22%20y%3D%22232%22%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
$form-password-icon-hide:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223C333.831%2C67.707%2C238.47%2C55.862%2C163.228%2C95.346l23.938%2C23.939c61.571-27.691%2C136.573-16.327%2C187.105%2C34.115L464%2C246.683v3.107l-71.744%2C74.585%2C22.63%2C22.63L496%2C262.683V233.79Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M352.8%2C284.33A103.307%2C103.307%2C0%2C0%2C0%2C219.907%2C151.438L246.1%2C177.63a71.228%2C71.228%2C0%2C0%2C1%2C80.507%2C80.508Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M369.9%2C347.268l-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806c-.083.113-.169.222-.253.334l-99.681-99.681c.112-.083.221-.17.334-.253L191.12%2C167.906c-.108.087-.213.179-.321.266L38.627%2C16H16V38.627l95.689%2C95.689L16%2C233.79v28.893l98.778%2C102.689.218.222A199.732%2C199.732%2C0%2C0%2C0%2C367.372%2C390l106%2C106H496V473.373L392.537%2C369.911Zm-177.157-131.9L288.871%2C311.5a71.28%2C71.28%2C0%2C0%2C1-96.133-96.133ZM137.729%2C343.073%2C48%2C249.79v-3.107l86.319-89.737%2C35.065%2C35.064A103.248%2C103.248%2C0%2C0%2C0%2C312.226%2C334.853l32.007%2C32.007C279.723%2C406.875%2C193.711%2C398.955%2C137.729%2C343.073Z%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
$form-password-icon-color:        var(--cui-tertiary-color) !default;
$form-password-icon-hover-color:  var(--cui-secondary-color) !default;
$form-password-icon-size:         1.25rem !default;
$form-password-icon-size-lg:      1.5rem !default;
$form-password-icon-size-sm:      1rem !default;