Forms

Dynamic form components to give your users informative and intuitive inputs
Default Bootstrap Form Controls
form
    .form-group
        label(for='exampleFormControlInput1') Email address
        input#exampleFormControlInput1.form-control(type='email', placeholder='[email protected]')
    .form-group
        label(for='exampleFormControlSelect1') Example select
        select#exampleFormControlSelect1.form-control
            option 1
            option 2
            option 3
            option 4
            option 5
    .form-group
        label(for='exampleFormControlSelect2') Example multiple select
        select#exampleFormControlSelect2.form-control(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .form-group
        label(for='exampleFormControlTextarea1') Example textarea
        textarea#exampleFormControlTextarea1.form-control(rows='3')
The default Bootstrap form control states have been restyled to fit the SB Admin Pro theme. The style has changed, but the markup is identical.
Custom Solid Form Controls
form
    .form-group
        label(for='exampleFormControlInput1') Email address
        input#exampleFormControlInput1.form-control.form-control-solid(type='email', placeholder='[email protected]')
    .form-group
        label(for='exampleFormControlSelect1') Example select
        select#exampleFormControlSelect1.form-control.form-control-solid
            option 1
            option 2
            option 3
            option 4
            option 5
    .form-group
        label(for='exampleFormControlSelect2') Example multiple select
        select#exampleFormControlSelect2.form-control.form-control-solid(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .form-group
        label(for='exampleFormControlTextarea1') Example textarea
        textarea#exampleFormControlTextarea1.form-control.form-control-solid(rows='3')
Custom solid form controls have been developed as an alternative to the default form styling. Use them by appending the .form-control-solid to the normal .form-control class.
Custom Checkboxes & Radio
Bootstrap Custom Checkboxes:
.custom-control.custom-checkbox
    input#customCheck1.custom-control-input(type='checkbox')
    label.custom-control-label(for='customCheck1') Custom Checkbox 1
.custom-control.custom-checkbox
    input#customCheck2.custom-control-input(type='checkbox')
    label.custom-control-label(for='customCheck2') Custom Checkbox 2
.custom-control.custom-checkbox
    input#customCheck3.custom-control-input(type='checkbox', disabled)
    label.custom-control-label(for='customCheck3') Custom Checkbox (Disabled)
Bootstrap's custom checkbox styling has been modified for the SB Admin Pro theme.
Bootstrap Custom Radio:
.custom-control.custom-radio
    input#customRadio1.custom-control-input(type='radio', name='customRadio')
    label.custom-control-label(for='customRadio1') Toggle this custom radio
.custom-control.custom-radio
    input#customRadio2.custom-control-input(type='radio', name='customRadio')
    label.custom-control-label(for='customRadio2') Or toggle this other custom radio
.custom-control.custom-radio
    input#customRadio3.custom-control-input(type='radio', name='customRadio', disabled)
    label.custom-control-label(for='customRadio3') This radio is disabled
Bootstrap's custom radio styling has also been modified for the SB Admin Pro theme.
Solid Checkboxes & Radio
Custom Solid Checkboxes:
.custom-control.custom-checkbox.custom-control-solid
    input#customCheckSolid1.custom-control-input(type='checkbox')
    label.custom-control-label(for='customCheckSolid1') Custom Checkbox 1
.custom-control.custom-checkbox.custom-control-solid
    input#customCheckSolid2.custom-control-input(type='checkbox')
    label.custom-control-label(for='customCheckSolid2') Custom Checkbox 2
.custom-control.custom-checkbox.custom-control-solid
    input#customCheckSolid3.custom-control-input(type='checkbox', disabled)
    label.custom-control-label(for='customCheckSolid3') Custom Checkbox (Disabled)
The .custom-control-solid can be used with a .custom-control class to get a solid styling for custom checkboxes.
Custom Solid Radio:
.custom-control.custom-radio.custom-control-solid
    input#customRadioSolid1.custom-control-input(type='radio', name='customRadioSolid')
    label.custom-control-label(for='customRadioSolid1') Toggle this custom radio
.custom-control.custom-radio.custom-control-solid
    input#customRadioSolid2.custom-control-input(type='radio', name='customRadioSolid')
    label.custom-control-label(for='customRadioSolid2') Or toggle this other custom radio
.custom-control.custom-radio.custom-control-solid
    input#customRadioSolid3.custom-control-input(type='radio', name='customRadioSolid', disabled)
    label.custom-control-label(for='customRadioSolid3') This radio is disabled
The .custom-control-solid works with custom radios as well.
Joined Input Group
// Joined input group append example
.input-group.input-group-joined
    input.form-control(type='text', placeholder='Input group append...', aria-label='Search')
    .input-group-append
        span.input-group-text
            i(data-feather='search')

// Joined input group prepend example
.input-group.input-group-joined
    .input-group-prepend
        span.input-group-text
            i(data-feather='search')
    input.form-control(type='text', placeholder='Input group prepend...', aria-label='Search')

// Joined input group solid append example
.input-group.input-group-joined.mb-4.input-group-solid
    input.form-control(type='text', placeholder='Input group append...', aria-label='Search')
    .input-group-append
        span.input-group-text
            i(data-feather='search')

// Joined input group solid prepend example
.input-group.input-group-joined.input-group-solid
    .input-group-prepend
        span.input-group-text
            i(data-feather='search')
    input.form-control(type='text', placeholder='Input group prepend...', aria-label='Search')
The joined input group uses the :focus-within CSS pseudo class to join input group appends and prepends within an input group. Unlike Bootstrap's default input group behavior, these joined input group variations will focus the entire input group when the form control within is selected. This variation also removes the background and border coloring of the append and prepend elements for a smooth, and seamless input group appearance.
Date Range Picker Plugin 
// Date Range Picker Example
button#reportrange.btn.btn-light.btn-sm.line-height-normal.p-3
    i.mr-2.text-primary(data-feather='calendar')
    span
    i.ml-1(data-feather='chevron-down')
// Date Range Picker Example
$(function () {
    var start = moment().subtract(29, "days");
    var end = moment();

    function cb(start, end) {
        $("#reportrange span").html(
            start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY")
        );
    }

    $("#reportrange").daterangepicker(
        {
            startDate: start,
            endDate: end,
            ranges: {
                Today: [moment(), moment()],
                Yesterday: [
                    moment().subtract(1, "days"),
                    moment().subtract(1, "days"),
                ],
                "Last 7 Days": [moment().subtract(6, "days"), moment()],
                "Last 30 Days": [moment().subtract(29, "days"), moment()],
                "This Month": [
                    moment().startOf("month"),
                    moment().endOf("month"),
                ],
                "Last Month": [
                    moment().subtract(1, "month").startOf("month"),
                    moment().subtract(1, "month").endOf("month"),
                ],
            },
        },
        cb
    );

    cb(start, end);
});

In the example above, the empty span element it used to populate the content of the button element via JavaScript. This date range picker is a third party plugin with more functionality than what is shown in this example. Visit the Date Range Picker Documentation for more information on using this plugin.

Requires JavaScript
Bootstrap Documentation Available

Forms are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of forms within your project, visit the official Bootstrap forms documentation page.

Visit Bootstrap Forms Docs