Please wait...
Page is loading

Floating labels

BS4 theme floating label is an enhancement of BS forms .

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

To use floating label:

  • Wrap the .form-control element with .floating-label (you add this to .form-group)
  • The first child of .floating-label should be the .form-control element itself and the second child should be the label
  • Add {placeholder: true} to the .form-control element (it's mandatory for floating label to work)
  • You can add .floating-label-fixed to .floating-label, once you do that the .form-control placeholder isn't mandatory
  • .floating-label will add padding above the .form-control according to the floating label size
.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag "floating-label-default-behaviour", nil, class: 'form-control', placeholder: true
      =label_tag "floating-label-default-behaviour", 'floating label'

  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag "fixed-floating-label-default-behaviour", nil, class: 'form-control', placeholder: 'this is a placeholder'
      =label_tag "fixed-floating-label-default-behaviour", 'fixed floating label'

Size

Floating label will adjust to the size of the .form-control, .custom-select and .custom-control 

.form-row
  .col-24.col-md-8
    .form-group.floating-label
      =text_field_tag "floating-label-sm", nil, class: 'form-control form-control-sm', placeholder: true
      =label_tag "floating-label-sm", 'Small'

  .col-24.col-md-8
    .form-group.floating-label
      =text_field_tag "floating-label-normal", nil, class: 'form-control', placeholder: true
      =label_tag "floating-label-normal", 'Normal'

  .col-24.col-md-8
    .form-group.floating-label
      =text_field_tag "floating-label-lg", nil, class: 'form-control form-control-lg', placeholder: true
      =label_tag "floating-label-lg", 'Large'

Special controls

In the following controls floating label should be floating fixed by default:

  • .custom_select
  • rand field with .form-control
  • .form-control used as a wrapper

Range field can't have a floating label, you should use .form-control wrapper for that

this is wrapped in form control 
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag "special-control-select-tag-with-fixed-floating-label", options_for_select([ "VISA", "MasterCard" ], "MasterCard"), class: 'custom-select'
      =label_tag "special-control-select-tag-with-fixed-floating-label", 'Fixed floating label'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =range_field_tag 'special-control-range-tag-with-fixed-floating-label', 50, min: 0, max: 100, step: '.1', class: 'custom-range form-control'
      =label_tag "special-control-group-tag-with-fixed-floating-label", 'Fixed floating label'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      .form-control
        this is wrapped in form control
      =label_tag "special-control-group-tag-with-fixed-floating-label", 'Fixed floating label'

Validations

  • Floating label supports validations out of the box, note that floating label will receive validation color.
this is an invalid form control
this is an invalid form control
this is an invalid form
.form-row
  .col-24.col-md-8
    .form-group.floating-label
      =text_field_tag "invalid-floating-label-basic", nil, class: 'is-invalid form-control', placeholder: true
      =label_tag "invalid-floating-label-basic", 'invalid floating label'
      .invalid-feedback='this is an invalid form control'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =text_field_tag "invalid-fixed-floating-label-basic", nil, class: 'is-invalid form-control', placeholder: 'this is a placeholder'
      =label_tag "invalid-fixed-floating-label-basic", 'invalid fixed floating label'
      .invalid-feedback='this is an invalid form control'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag "select-tag-with-invalid-fixed-floating-label", options_for_select([ "VISA", "MasterCard" ], "MasterCard"), class: 'custom-select is-invalid'
      =label_tag "select-tag-with-invalid-fixed-floating-label", 'Fixed floating label'
      .invalid-feedback='this is an invalid form'

Text align

.text-right and .text-left will change the .form-control behaviour in the following ways:

  • .text-right will set direction to RTL so that cursor will behave normally
  • .text-left will set direction to LTR so that cursor will behave normally
  • .text-left/.text-right will set floating label position accordingly
  • .text-left/.text-right will set validation error icon position accordingly
.text-right / .text-left should be set on .form-control
Keep in mind that text-right and text-left should be set directly on the .form-control for this to work 
.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag "floating-label-form-control-text-right", nil, class: 'form-control text-right', placeholder: true
      =label_tag "floating-label-form-control-text-right", 'text-right field'
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag "fixed-floating-label-form-control-text-right", nil, class: 'form-control text-right', placeholder: 'this is a placeholder'
      =label_tag "fixed-floating-label-form-control-text-right", 'text-right field'

.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag "invalid-floating-label-form-control-text-right", nil, class: 'form-control is-invalid text-right', placeholder: true
      =label_tag "invalid-floating-label-form-control-text-right", 'text-right field'
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag "invalid-fixed-floating-label-form-control-text-right", nil, class: 'form-control is-invalid text-right', placeholder: 'this is a placeholder'
      =label_tag "invalid-fixed-floating-label-form-control-text-right", 'text-right field'

Input groups

BS4 Theme input group adds .input-group-main wrapper that will allow floating label support.

  • Add .floating-label (and or .floating-label-fixed) on .input-group
  • Wrap the .form-control input or .custom-select in .input-group-main
  • Label should come after .form-control input or .custom-select inside .input-group-main
  • You can place .input-group-prepend before .input-group-main or .input-group-append after .input-group-main
  • .invalid-feedback and help text should come after .input-group
  • When field is invalid you should add .is-invalid class to the .input-group beside the .form-control/.custom-select
Sizing
Remember that sizing an .input-group you shouldn't use .form-control-lg and use .input-group-lg
there is an error
this is help text
there is an error
this is help text
.form-row
  .col-24.col-md-12
    .form-group
      .input-group.is-invalid.floating-label
        .input-group-prepend
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
        .input-group-main
          =text_field_tag "input-group-prepend-append-floating-label-fixed", nil, class: 'form-control is-invalid', placeholder: 'this is a placeholder'
          =label_tag 'input-group-prepend-append-floating-label-fixed', 'input group'
        .input-group-append
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
      .invalid-feedback='there is an error'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-12
    .form-group
      .input-group.input-group-lg.is-invalid.floating-label
        .input-group-prepend
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
        .input-group-main
          =text_field_tag "input-group-prepend-append-floating-label", nil, class: 'form-control is-invalid', placeholder: true
          =label_tag 'input-group-prepend-append-floating-label', 'input group'
        .input-group-append
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
      .invalid-feedback='there is an error'
      .form-text.small.text-muted='this is help text'

BS4 form

To learn more about using floating label with BS4 form click here

On this page