Movatterモバイル変換

[0]ホーム
URL:

Framework:
Hire Us Get CoreUI PRO all-access →
CoreUI PRO hexagon
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.

🤖 Looking for the LLM-optimized version?View llm.md

On this page

Example

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

html
<divclass="mb-3"><labelfor="examplePasswordInput1"class="form-label">Password</label><divclass="form-password"><inputtype="password"class="form-control"id="examplePasswordInput1"placeholder="Enter your password"><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div></div><divclass="mb-3"><labelfor="examplePasswordInput2"class="form-label">Password with value</label><divclass="form-password"><inputtype="password"class="form-control"id="examplePasswordInput2"placeholder="Enter your password"value="Top secret"><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="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
<divclass="form-password"><inputtype="password"class="form-control form-control-lg"placeholder="Large password input"><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div><divclass="form-password"><inputtype="password"class="form-control"placeholder="Default password input"><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div><divclass="form-password"><inputtype="password"class="form-control form-control-sm"placeholder="Small password input"><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div>

Disabled state

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

html
<divclass="form-password"><inputtype="password"class="form-control"placeholder="Disabled password input"disabled><buttontype="button"class="form-password-action"data-coreui-toggle="password"disabledaria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div><divclass="form-password"><inputtype="password"class="form-control"placeholder="Disabled and readonly input"disabledreadonly><buttontype="button"class="form-password-action"data-coreui-toggle="password"disabledaria-label="Toggle password visibility"><spanclass="form-password-action-icon"></span></button></div>

Readonly state

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

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

Usage

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

  • In the constructor, please usebootstrap instead ofcoreui. For example,new bootstrap.Alert(...) instead ofnew coreui.Alert(...)
  • In events, please usebs instead ofcoreui, for exampleclose.bs.alert instead ofclose.coreui.alert
  • In data attributes, please usebs instead ofcoreui. For example,data-bs-toggle="..." instead ofdata-coreui-toggle="..."

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

<divclass="form-password"><inputtype="password"class="form-control"placeholder="Readonly password input"value="Readonly input here..."readonly><buttontype="button"class="form-password-action"data-coreui-toggle="password"aria-label="Toggle password visibility"><spanclass="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.15sease-in-out,box-shadow.15sease-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;
[8]ページ先頭
©2009-2025 Movatter.jp