Please wait...
Page is loading

BS4 form

BS4 form adds decoration functionality to support BS form syntax and BS4 theme floating label .

Getting started

BS4 form doesn't require any sass or js file.

Default behaviour

BS4 form adds a form builder - Bs4Form::FormBuilder , this form builder can be used via the helper - bs4_form_for. In addition to this helper it adds the following helpers:

  • bs4_fields_for (fields_for when in bs4 form)
  • bs4_form_group (form_group when in bs4 form)
  • bs4_field_errors (field_errors when in bs4 form)
Browser native validations are disabled
The BS4 form builder will add {novalidate: true} to the form which will disable browser native validation.

Form control

the Following fields are type of form control:

When using BS4 form field of type form-control:

  1. .form-control is added to the form element automatically.
  2. .is-invalid is added to the form element automatically when there is an error.
  3. By default form-control element is decorated with floating label and feedback (when is invalid)
  4. To disable decoration use {decorate: false}, keep in mind that 1, 2 still apply.
  5. Customize decoration:
    • decorate: true, false (default is true)
    • floating: fixed, true, false (default is true)
    • form_group: true, false (default is true)
    • wrapper_options: a hash {} that will allow wrapper customization (if floating is false adn form_group is false a wrapper will not be added)
    • label: true, false, text (default is true which will add humanize name)
    • label_options: a hash {} that will allow label customization
    • feedback: true, false (default is true which will add an error message if there is one)
    • feedback_options: a hash {} that will allow feedback customization
    • help: text (default is nil)
    • help_options: a hash {} that will allow help customization
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.text_field :name, id: 'fully_decorated_text_field',
                           label: 'Fully decorated', label_options: {for: 'fully_decorated_text_field'},
                           help: 'this is help text'

    .col-24.col-md-8
      =c.text_field :name, id: 'custom_decorated_text_field',
                           label: 'Decorated (custom)', label_options: {style: 'color: blue', for: 'custom_decorated_text_field'},
                           feedback_options: {style: 'color: orange'},
                           help: 'this is help text', help_options: {class: 'form-text small', style: 'color: green'}

    .col-24.col-md-8
      =c.form_group :name, class: 'floating-label' do |attr|
        =c.text_field attr, decorate: false, id: 'not_decorated_text_field', placeholder: true
        =c.label attr, 'Non decorated', for: 'not_decorated_text_field'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)

  .form-row
    .col-24.col-md-8
      =c.text_area :name, id: 'fully_decorated_text_area',
                           label: 'Fully decorated', label_options: {for: 'fully_decorated_text_area'},
                           help: 'this is help text'

    .col-24.col-md-8
      =c.text_area :name, id: 'custom_decorated_text_area',
                           label: 'Decorated (custom)', label_options: {style: 'color: blue', for: 'custom_decorated_text_area'},
                           feedback_options: {style: 'color: orange'},
                           help: 'this is help text', help_options: {class: 'form-text small', style: 'color: green'}

    .col-24.col-md-8
      =c.form_group :name, class: 'floating-label' do |attr|
        =c.text_area attr, decorate: false, id: 'not_decorated_text_area', placeholder: true
        =c.label attr, 'Non decorated', for: 'not_decorated_text_area'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)



-# =f.text_area :questions, label: 'מה ברצונכם לשאול את האורחים?', rows: 5, class: 'border-bot1tom-0'

Custom select

Custom select will behave exactly like .form-control, the only difference is that instead of .form-control we use .custom-select, this also apply for sizing (.custom-select-lg and .custom-select-sm)

Floating label
custom select can't have a floating label so either don't use floating label at all or use fixed floating label
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.select :name,
                      options_for_select([ "VISA", "MasterCard" ], "MasterCard"), {},
                      id: 'fully_decorated_select_field',
                      label: 'Fully Decorated', label_options: {for: 'fully_decorated_select_field'},
                      help: 'this is help text'

    .col-24.col-md-8
      =c.select :name,
                      options_for_select([ "VISA", "MasterCard" ], "MasterCard"), {},
                      id: 'custom_decorated_select_field',
                      label: 'Decorated (custom)', label_options: {style: 'color: blue', for: 'custom_decorated_select_field'},
                      feedback_options: {style: 'color: orange'},
                      help: 'this is help text', help_options: {class: 'form-text small', style: 'color: green'}

    .col-24.col-md-8
      =c.form_group :name, class: 'floating-label floating-label-fixed' do |attr|
        =c.select :name, options_for_select([ "VISA", "MasterCard" ], "MasterCard"), {},
                        decorate: false, id: 'not_decorated_select_field'
        =c.label attr, 'Non decorated', for: 'not_decorated_select_field'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)

Custom control

the Following fields are type of custom-control:

When using BS4 form field of type custom-control:

  1. .custom-control-input is added to the form element automatically.
  2. .is-invalid is added to the form element automatically when there is an error.
  3. By default custom-control element is decorated with a .custom-control wrapper, label and feedback (when is invalid)
  4. when there is an error .is-invalid is added to the .custom-control wrapper
  5. .custom-checkbox or .custom-switch will be added to the .custom-control wrapper according to the field type
  6. To disable decoration use {decorate: false}, keep in mind that 1, 2 still apply.
  7. Customize decoration:
    • type: switch (default is nil which means check box).
      * you can just use the helper switch instead of check_box.
    • decorate: true, false (default is true)
    • form_group: true, false (default is true)
    • form_group_options: a hash {} that will allow form_group wrapper customization (if form_group is false this wrapper will not be added)
    • custom_control: true, false (default is true)
    • custom_control_options: a hash {} that will allow custom_control wrapper customization (if custom_control is false this wrapper will not be added)
    • label: true, false, text (default is true which will add humanize name)
    • label_options: a hash {} that will allow label customization
    • feedback: true, false (default is true which will add an error message if there is one)
    • feedback_options: a hash {} that will allow feedback customization
    • help: text (default is nil)
    • help_options: a hash {} that will allow help customization
    • Html custom label using block you can use a block to create a custom label
Floating label
custom control can't have a floating label or a fixed floating label
Using {label: false} (not for custom label)
Since custom control has a specific structure using {label: false} will only remove the label but you will not be able to customise it. {label: false} is helpful in specific situations like in the multi select check box in td found in a grid (it has no label). If you wish to customise the label use a block. You can also use {decorate: false} and read the following alert.
Structure in non decorated custom control
Label should be after the input and inside the .custom-control wrapper.
Help and feedback shouldn't be inside .custom-control-wrapper
.is-invalid should be manually added to .custom-control wrapper if there is an error
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
Custom control with label in a block (html labels)
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
Custom control with {label: false}
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.check_box :name, {id: "fully_decorated_check_box",
                           help: 'this is help text', label: 'Fully Decorated',
                           label_options: {for: "fully_decorated_check_box"}},
                           1, 0

    .col-24.col-md-8
      =c.check_box :name, {id: "custom_decorated_check_box",
                           help: 'this is help text', label: 'Decorated (Custom)',
                           feedback_options: {style: 'color: orange'},
                           help_options: {class: 'form-text small', style: 'color: green'},
                           label_options: {for: "custom_decorated_check_box", style: 'color: blue'}},
                           1, 0

    .col-24.col-md-8
      =c.form_group :name do |attr|
        .custom-control.custom-checkbox.custom-control-lg.is-invalid
          =c.check_box :name, {id: 'not_decorated_check_box', decorate: false, class: 'is-invalid'}, 1, 0
          =c.label attr, 'Not decorated', for: 'not_decorated_check_box', class: 'custom-control-label'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)

  .form-row
    .col-24.col-md-8
      =c.switch :name, {id: "fully_decorated_switch",
                        help: 'this is help text', label: 'Fully Decorated',
                        label_options: {for: "fully_decorated_switch"}},
                        1, 0

    .col-24.col-md-8
      =c.switch :name, {id: "custom_decorated_switch",
                        help: 'this is help text', label: 'Decorated (Custom)',
                        help_options: {class: 'form-text small', style: 'color: green'},
                        feedback_options: {style: 'color: orange'},
                        label_options: {for: "custom_decorated_switch", style: 'color: blue'}},
                        1, 0

    .col-24.col-md-8
      =c.form_group :name do |attr|
        .custom-control.custom-switch.is-invalid
          =c.switch :name, {id: 'not_decorated_switch', decorate: false, class: 'is-invalid'}, 1, 0
          =c.label attr, 'Not decorated', for: 'not_decorated_switch', class: 'custom-control-label'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)
  %hr
  .small.text-muted.mb-2 Custom control with label in a block (html labels)
  .form-row
    .col-24.col-md-8
      =c.switch :name, {id: "fully_decorated_switch_with_html_label",
                        help: 'this is help text'},
                        1, 0 do
        ='this label contains a'
        =link_to 'link', 'javascript:alert("this is a link!")'
    .col-24.col-md-8
      =c.check_box :name, {id: "fully_decorated_check_box_with_html_label",
                          help: 'this is help text'},
                          1, 0 do
        ='this label contains a'
        =link_to 'link', 'javascript:alert("this is a link!")'
    .col-24.col-md-8
      =c.radio_button :name, '1', {id: "fully_decorated_radio_button_with_html_label",
                                   feedback: true,
                                   help: 'this is help text'} do
        ='this label contains a'
        =link_to 'link', 'javascript:alert("this is a link!")'
  %hr
  .small.text-muted.mb-2 Custom control with {label: false}
  .form-row
    .col-24.col-md-8
      =c.switch :name, {id: "fully_decorated_switch_without_label",
                        help: 'this is help text',
                        label: false},
                        1, 0
    .col-24.col-md-8
      =c.check_box :name, {id: "fully_decorated_check_box_without_label",
                          help: 'this is help text',
                          label: false},
                          1, 0
    .col-24.col-md-8
      =c.radio_button :name, '1', {id: "fully_decorated_radio_button_without_label",
                                   feedback: true,
                                   help: 'this is help text',
                                   label: false}

Radio button

Radio buttons are types of custom control, because usually couple of them are grouped together you shouldn't place a feedback or help text on each one of them... that's why they have couple of key differences:

  • By default feedback and form_group are false (unlike custom control)
  • By default label will be radio button's value instead of humanize field name
  • By default label options will have {value: radio_button_value}
  • .custom-radio will be added to the .custom-control wrapper
  • To disable decoration use {decorate: false}
→ There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
this is help text
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.radio_button :name, '10', label: "Fully decorated"

    .col-24.col-md-8
      =c.form_group :name do |attr|
        =c.radio_button attr, '11', label: "Decorated (custom)",
                              feedback_options: {style: 'color: orange'},
                              feedback: true,
                              help: 'this is help text',
                              help_options: {style: 'color: green', class: 'form-text small'},
                              label_options: {style: 'color: blue'}

    .col-24.col-md-8
      =c.form_group :name do |attr|
        .custom-control.custom-radio.is-invalid
          =c.radio_button :name, '12', decorate: false, class: 'is-invalid'
          =c.label attr, 'Not decorated', class: 'custom-control-label', value: '12'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)

Form controls group

Form controls group will behave exactly like .form-control, the only difference is that instead of .form-control element (like input) the .form-control will be used as a wrapper

Floating label
When using .form-control as a Form controls group you can't have a floating label so either don't use floating label at all or use fixed floating label
→ There is an error with your name
→ There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
→ There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
→ There is an error with your name
→ There is an error with your name
this is help text
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.form_controls_group :name, label: 'Fully decorated', help: 'this is help text' do
        =c.radio_button :name, '1'
        =c.radio_button :name, '2'
        =c.radio_button :name, '3'

    .col-24.col-md-8
      =c.form_controls_group :name,
                                    label: 'Decorated (custom)',
                                    help: 'this is help text',
                                    help_options: {style: 'color: green', class: 'form-text small'},
                                    feedback_options: {style: 'color: orange'},
                                    label_options: {style: 'color: blue'} do

        =c.radio_button :name, '4'
        =c.radio_button :name, '5'
        =c.radio_button :name, '6'

    .col-24.col-md-8
      =c.form_group :name, class: 'floating-label floating-label-fixed' do |attr|
        .form-control.is-invalid{style: 'height: auto'}
          =c.radio_button attr, '7'
          =c.radio_button attr, '8'
          =c.radio_button attr, '9'
        =c.label attr, 'Not decorated'
        .form-text.small.text-muted='this is help text'
        =c.field_errors(attr)

Number field

BS4 number_field helper adds the following default options:

  • autocomplete: 'off'
  • pattern: '[0-9]*'

In mobile devices it should open numbers keyboard

→ There is an error with your name
There is an error with your name
check this number field on a mobile device
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.number_field :name, help: 'check this number field on a mobile device', label: 'Number field',
                            id: 'number_field_form_model_number_field', label_options: {for: 'number_field_form_model_number_field'}

Password field

BS4 password_field helper adds the following default options:

  • autocomplete: 'off'

This is important cause sometimes we allow the user to toggle password field visibility and that changes field type to text and when field type is text the browser can attempt auto complete while this is still a password field that shouldn't allow it.

→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.password_field :name, id: 'password_field_form_model_password_field', label: 'password', help: 'this is help text' do |ig|
        -ig.append do
          =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_field_form_model_password_field', class: 'btn btn-light' do
            %i.fas.fa-eye
  .form-row
    .col-24.col-md-12
      =c.password_field :name, id: 'password_field_form_model_password_field_label_not_floating', label: 'password (not floating)', help: 'this is help text', floating: false do |ig|
        -ig.append do
          =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_field_form_model_password_field_label_not_floating', class: 'btn btn-light' do
            %i.fas.fa-eye
      -# =c.form_group :name do |attr|
        .input-group.floating-label.is-invalid
          .input-group-main
            =c.password_field attr, id: 'password_field_form_model_password_field', decorate: false, placeholder: true
            =c.label attr, 'password', for: 'password_field_form_model_password_field'
          .input-group-append
            =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_field_form_model_password_field', class: 'btn btn-light' do
              %i.fas.fa-eye
        =c.field_errors(attr)
        .form-text.small.text-muted='this is help text'

Simple date field

BS4 simple_date_field helper adds the following default options:

  • autocomplete: 'off'
  • floating: 'fixed'
  • placeholder: '__/__/____'
  • pattern: '[0-9]*'
  • data-mask: '00/00/0000'
  • class: 'ltr text-left'

This field is more suited to choose birth date or any other historical date than a date picker because the date is usually a far date and the day of the week/month is not important.

→ There is an error with your name
There is an error with your name
→ There is an error with your name
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:birth_date, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.simple_date_field :birth_date, id: 'birth_date_field'
    .col-24.col-md-8
      -form_model.birth_date = Date.today
      =c.simple_date_field :birth_date, id: 'birth_date_field_pre_loaded'

Range field

BS4 range_field makes range behave like a .form-control which means it will have .form-control class. In addition to that, by default it's label will be floating label fixed.

→ There is an error with your name
There is an error with your name
this is help text
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.range_field :name, min: 0, max: 100, step: '.1', help: 'this is help text', id: "range_field_form_model_number_field"

Super date field

super_date_field creates a text field with flat cal. check out super date field for more information on dependencies and options

→ There is an error with your name
There is an error with your name
→ There is an error with your name
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.super_date_field :name, id: 'super_date_field'
    .col-24.col-md-12
      =c.super_date_field :name, 'data-today-button': t('date.today'), id: 'super_date_field_with_floating_label'

Super time field

super_time_field creates a text field with jquery timepicker. check out super time field for more information on dependencies and options

→ There is an error with your name
There is an error with your name
→ There is an error with your name
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.super_time_field :name, id: 'super_time_field', 'data-min-time': '10:00', 'data-max-time': '16:00'
    .col-24.col-md-12
      =c.super_time_field :name, 'data-none-button': 'None', id: 'super_time_field_with_floating_label'

Super Text area

BS4 super_textarea creates a super textarea, you can pass a block for additional customisation like custom toolbar or char count. when passing block you have to include .super-textarea-placeholder check out super textarea for more information on dependencies and options

Clear
→ There is an error with your name
There is an error with your name
Clear
→ There is an error with your name
There is an error with your name
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.super_textarea :name, id: 'super_textarea'
    .col-24.col-md-12
      =c.super_textarea :name, id: 'super_textarea_with_custom_toolbar' do
        .super-textarea-placeholder
        .super-textarea-toolbar.d-flex.align-items-center
          %span.ql-formats
            =button_tag '', type:'button', class: 'ql-bold'
            =button_tag '', type:'button', class: 'ql-underline'
            =button_tag '', type:'button', class: 'ql-italic'
          .ml-auto.text-muted.small{data: {placeholder: 'char-counter', 'max_chars': 200, toggle: 'tooltip', title: 'this content is limited to 200 characters', placement: 'top'}}

:javascript
  $('#super_textarea').superTextArea({});
  $('#super_textarea_with_custom_toolbar').superTextArea({rich: true});

Super Select

form helpers for SuperSelect component

Usage

f.super_select(method, options, html_options) {|ds| }
options contain super select specific features whereas html_options contain all the standard input features (such as label, help, etc...)
  • groups - Default: nil, supported options: :sticky
  • multiple - Default: false, changes component to multiple select
  • url - Default: nil, url to search options for selection, params sent are {term: [search term], _type: 'query' }
  • suggestions_description - Default: nil, explains what are the suggestions displayed, highly recommended when passing url + suggestions
  • search - Default: nil, supported options: :persistent

Builder Methods

item building

items - Accepts an array of tuples (another array with two elements) or ActiveRecord objects that will be available for selection, current selection will be rendered from these in both remote and local super_select. And an optional block which will be used for rendering the option.
If the array consists of tuples the first element of each tuple will be rendered or passed to a view block if one is available and the second is taken to be the id.
If the array consists of ActiveRecord objects #id will be called on each to provide the option's ids and the record will be passed on to the view block.
The tuple detection is naive and can give odd results if anything except for tuples or ActiveRecord objects is in the array.
Options are: item_view, header_view, selection_view

In remote super_selects non-suggestion items are never displayed for selection, they are only used for the currently selected value.

suggestions - Only used in remote-search inputs (i.e. url option exists), these are the *only* items that will be displayed for selection when no search is active.
Accepts the same options as #items

View definition

define_view

  • items
  • header
  • selection

item_view

this is helpful
-form_model = ActiveModelAttrs.open_model(char_id: nil)

.form-row
  .col-24.col-md-12
    =bs4_form_for DemoForm.new, url: '' do |c|
      =c.super_select :name, {}, label: 'decorated with help', help: 'this is helpful', id: 'super_select' do |ds|
        -ds.items [['one', 1], ['two', 2]]


  .col-24.col-md-12
    =bs4_form_for form_model, url: '' do |c|
      =c.super_select :char_id, {}, placeholder: 'This is the no-selection placeholder', label: 'With custom view', id: 'super_select_custom_view' do |ds|
        -ds.items AnimeCharacter.limit(10) do |char|
          =char.name
          .badge.badge-light.border.ml-2=char.age.present? ? "age: #{char.age}" : 'age: ?'
          -if char.alive == false
            .badge.badge-secondary.ml-2
              %i.fas.fa-skull-crossbones
              dead
          -elsif char.alive
            .badge.badge-success.ml-2
              %i.fas.fa-seedling
              alive

  .col-24.col-md-12
    =bs4_form_for form_model, url: '' do |c|
      =c.super_select :char_id, {groups: :sticky, search: :persistent, multiple: true}, label: "Full custom view + persistent search",  id: 'super_select_reused_views_and_header' do |ds|
        -AnimeCharacter.limit(20).group_by{|c| c.anime_character_rank }.each do |rank, chars|
          -ds.items chars, header: rank&.name || 'none', view: :anime_char

        -ds.define_view :anime_char do |v|
          -v.items do |char|
            =char.name
          -v.header do |group|
            %strong="#{group.options[:header]}, #{group.items.size}"
          -v.selection do |char|
            ="#{char.name} (#{char.anime_character_rank&.name || 'none'})"

  .col-24.col-md-12
    -selected = AnimeCharacter.where(name: 'Sasuke Uchiha').first
    =bs4_form_for ActiveModelAttrs.open_model(char_id: selected&.id), url: '' do |c|
      =c.super_select :char_id, {url: dropdown_search_plugins_data_grid_anime_characters_path, suggestions_description: 'Uzumaki Family'}, placeholder: 'Please search', label: 'remote search', id: 'super_select_remote' do |ds|
        -# render selected item, will quietly do nothing if no selected item exists
        =render('plugins/data_grid/anime_characters/dropdown_view.html', items: AnimeCharacter.where(id: c.object.char_id).to_a, ds: ds)
        -# dropdown_view partial also defined :default view which we can then reuse for suggestions
        -ds.suggestions AnimeCharacter.where('name ~ ?', 'Uzumaki'), view: :default

Size

Here you can find different bs4 form components with LG size

→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
check this number field on a mobile device
→ There is an error with your name
There is an error with your name
this is help text
→ There is an error with your name
There is an error with your name
→ There is an error with your name
There is an error with your name
→ There is an error with your name
→ There is an error with your name
this is help
There is an error with your name
→ There is an error with your name
→ There is an error with your name
→ There is an error with your name
→ There is an error with your name
There is an error with your name
this is help text
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-12
      =c.range_field :name, min: 0, max: 100, step: '.1', label: 'Large range', class: 'form-control-lg', help: 'this is help text', id: "range_field_form_model_number_field_lg"
    .col-24.col-md-12
      =c.password_field :name, id: 'password_field_form_model_password_field_lg', label: 'Large pass in input group', help: 'this is help text', input_group_options: {class: 'input-group-lg'} do |ig|
        -ig.append do
          =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_field_form_model_password_field_lg', class: 'btn btn-light' do
            %i.fas.fa-eye
      -# =c.form_group :name do |attr|
        .input-group.input-group-lg.floating-label.is-invalid
          .input-group-main
            =c.password_field attr, id: 'password_field_form_model_password_field_lg', decorate: false, placeholder: true
            =c.label attr, 'Large pass in input group', for: 'password_field_form_model_password_field_lg'
          .input-group-append
            =button_tag type: 'button', 'data-toggle': 'password', 'data-target': '#password_field_form_model_password_field_lg', class: 'btn btn-light' do
              %i.fas.fa-eye
        =c.field_errors(attr)
        .form-text.small.text-muted='this is help text'
  .form-row
    .col-24.col-md-12
      =c.number_field :name, class: 'form-control-lg', help: 'check this number field on a mobile device', label: 'Large number field',
                      id: 'number_field_form_model_number_field_lg', label_options: {for: 'number_field_form_model_number_field_lg'}

    .col-24.col-md-12
      =c.select :name,
                options_for_select([ "VISA", "MasterCard" ], "MasterCard"), {},
                class: 'custom-select-lg',
                id: 'fully_decorated_select_field_lg',
                label: 'Large custom select', label_options: {for: 'fully_decorated_select_field_lg'},
                help: 'this is help text'

  .form-row
    .col-24.col-md-12
      =c.check_box :name, {id: "fully_decorated_check_box_lg", label: 'Large check box', label_options: {for: 'fully_decorated_check_box_lg'}, custom_control_options: {class: 'custom-control-lg'}}, 1, 0
      =c.check_box :name, {id: "fully_decorated_switch_lg", label: 'Large switch', label_options: {for: 'fully_decorated_switch_lg'}, custom_control_options: {class: 'custom-control-lg'}}, 1, 0
      =c.form_group :name do |attr|
        =c.radio_button attr, 'Large radio button 1', custom_control_options: {class: 'custom-control-inline custom-control-lg'}
        =c.radio_button attr, 'Large radio button 2', custom_control_options: {class: 'custom-control-inline custom-control-lg'}
        .form-text.small.text-muted='this is help'
        =c.field_errors attr

    .col-24.col-md-12
      =c.form_controls_group :name, class: 'form-control-lg', label: 'Large Form controls group', help: 'this is help text' do
        =c.radio_button :name, 'Large radio 1', custom_control_options: {class: 'custom-control-lg'}
        =c.radio_button :name, 'Large radio 2', custom_control_options: {class: 'custom-control-lg'}
        =c.radio_button :name, 'Large radio 3', custom_control_options: {class: 'custom-control-lg'}
        =c.radio_button :name, 'Large radio 4', custom_control_options: {class: 'custom-control-lg'}

Input group

Bs4 theme has support for special input groups that support floating label and BS4 form lets you use it. To use prepend and append add a block to an input field with an ig var, in the block use "ig.prepend do" and "ig.append do" to additional content to the input. The input will behave like normal input with all it's options (like floating label, placeholder etc...) and will add an option to use input_group_options: {class: 'xxx'}

₪
→ There is an error with your name
There is an error with your name
this is help block
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
There is an error with your name
this is help block
₪
→ There is an error with your name
there is an error
this is help text
-form_model = DemoForm.new
-form_model.errors.add(:name, 'There is an error with your name')

=bs4_form_for form_model, url: '' do |c|
  .form-row
    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating', id: 'text_field_with_input_group_prepend', help: 'this is help block', floating: false do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'

    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating', id: 'text_field_with_input_group_append', help: 'this is help block', floating: false do |ig|
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'

    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating', id: 'text_field_with_input_group', help: 'this is help block', floating: false do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'

  .form-row
    .col-24.col-md-8
      =c.text_field :name, label: 'label floating', id: 'text_field_with_input_group_prepend_and_floating_label', help: 'this is help block' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'

    .col-24.col-md-8
      =c.text_field :name, label: 'label floating', id: 'text_field_with_input_group_append_and_floating_label', help: 'this is help block' do |ig|
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'

    .col-24.col-md-8
      =c.text_field :name, label: 'label floating', id: 'text_field_with_input_group_and_floating_label', help: 'this is help block' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'

  .form-row
    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating fixed', id: 'text_field_with_input_group_prepend_and_fixed_floating_label', help: 'this is help block', floating: 'fixed' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'

    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating fixed', id: 'text_field_with_input_group_append_and_fixed_floating_label', help: 'this is help block', floating: 'fixed' do |ig|
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'

    .col-24.col-md-8
      =c.text_field :name, label: 'label not floating fixed', id: 'text_field_with_input_group_and_fixed_floating_label', help: 'this is help block', floating: 'fixed' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'
        -ig.append do
          =button_tag 'bla', type: 'button', class: 'btn btn-light'
    .col-24.col-md-8
      =c.super_date_field :name, id: 'super_date_field_with_super_select', help: 'this is help block' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'
        -ig.append do
          =c.super_select :birth_date, {}, decorate: false, id: 'super_select' do |ds|
            -ds.items [['one', 1], ['two', 2]]
    .col-24.col-md-8.hidden-selection
      =c.super_date_field :name, id: 'super_date_field_with_hidden_super_select', help: 'this is help block' do |ig|
        -ig.prepend do
          .input-group-text.text-muted='₪'
        -ig.append do
          =c.super_select :birth_date, {}, decorate: false, id: 'hidden_super_select' do |ds|
            -ds.items [['one', 1], ['two', 2]]
    .col-24.col-md-8
      .form-group
        .input-group.is-invalid.floating-label
          .input-group-prepend
            .input-group-text.text-muted='₪'
          .input-group-main
            =c.super_select :name, {}, decorate: false, id: 'super_select_in_input_group_main' do |ds|
              -ds.items [['one', 1], ['two', 2]]
          .input-group-append
            =c.super_select :birth_date, {}, decorate: false, id: 'super_select_in_input_group_append' do |ds|
              -ds.items [['one', 1], ['two', 2]]
        .invalid-feedback='there is an error'
        .form-text.small.text-muted='this is help text'
On this page