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.

Bootstrap 5 Password Input

Password Input

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

On this page

Example

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

Password

Password with value

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

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

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/_variables.scss

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

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

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

$input-bg:                              var(--#{$prefix}body-bg);
$input-disabled-color:                  var(--#{$prefix}body-color);
$input-disabled-bg:                     var(--#{$prefix}secondary-bg);
$input-disabled-border-color:           var(--#{$prefix}border-color);

$input-color:                           var(--#{$prefix}body-color);
$input-border-color:                    var(--#{$prefix}border-color);
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      var(--#{$prefix}box-shadow-inset);

$input-border-radius:                   var(--#{$prefix}border-radius);
$input-border-radius-sm:                var(--#{$prefix}border-radius-sm);
$input-border-radius-lg:                var(--#{$prefix}border-radius-lg);

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

$input-placeholder-color:               var(--#{$prefix}secondary-color);
$input-plaintext-color:                 var(--#{$prefix}body-color);

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

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

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

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

$form-color-width:                      3rem;

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

scss/_variables.scss

$form-password-action-bg:         transparent;
$form-password-action-hover-bg:   var(--#{$prefix}tertiary-bg);
$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");
$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");
$form-password-icon-color:        var(--#{$prefix}tertiary-color);
$form-password-icon-hover-color:  var(--#{$prefix}secondary-color);
$form-password-icon-size:         1.25rem;
$form-password-icon-size-lg:      1.5rem;
$form-password-icon-size-sm:      1rem;