נא להמתין...
העמוד בטעינה

Passwords

BS4 theme passwords is based on BS input groups and adds the ability to toggle between visible and hidden password field.

Getting started

To use BS4 modal simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Default behaviour

Place password field in .input-group as shown below and append a button / link that will toggle passwords visibility.

  • You can use a link or a button to toggle visibility, just add 'data-toggle': 'password' and 'data-target': '#xxx' (xxx stands for the ID of the password field)
  • You can also use floating label, just keep in mind to use .input-group-main
  • When clicking the visibility toggler the password field input will be focused after the click
  • When submitting form passwords will be hidden
this is an error
this is help
Will hide passwords if visible
.form-row
  .col-24.col-md-12
    .form-group
      .input-group.floating-label.is-invalid
        .input-group-main
          =password_field_tag :password_with_floating_label, nil, :class=>'form-control is-invalid', placeholder: true
          =label_tag :password_with_floating_label, 'Floating password'
        .input-group-append
          =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_with_floating_label', class: 'btn btn-light' do
            %i.fas.fa-eye
      .invalid-feedback='this is an error'
      .form-text.small.text-muted='this is help'


  .col-24.col-md-12
    .form-group
      .input-group.input-group-lg.floating-label
        .input-group-main
          =password_field_tag :password_with_floating_label_lg, nil, :class=>'form-control', placeholder: true
          =label_tag :password_with_floating_label_lg, 'Floating password LG'
        .input-group-append
          =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_with_floating_label_lg', class: 'btn btn-light' do
            %i.fas.fa-eye


.mb-2=submit_tag 'submit this form', class: 'btn btn-primary'
.small.text-muted='Will hide passwords if visible'
On this page