Forms

Dynamic form components to give your users informative and intuitive inputs
Default Bootstrap Form Controls
form
    .mb-3
        label(for='exampleFormControlInput1') Email address
        input#exampleFormControlInput1.form-control(type='email', placeholder='[email protected]')
    .mb-3
        label(for='exampleFormControlSelect1') Example select
        select#exampleFormControlSelect1.form-control
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-3
        label(for='exampleFormControlSelect2') Example multiple select
        select#exampleFormControlSelect2.form-control(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-0
        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
    .mb-3
        label(for='exampleFormControlInput1') Email address
        input#exampleFormControlInput1.form-control.form-control-solid(type='email', placeholder='[email protected]')
    .mb-3
        label(for='exampleFormControlSelect1') Example select
        select#exampleFormControlSelect1.form-control.form-control-solid
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-3
        label(for='exampleFormControlSelect2') Example multiple select
        select#exampleFormControlSelect2.form-control.form-control-solid(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-0
        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:
.form-check
    input#flexCheckDefault.form-check-input(type='checkbox', value='')
    label.form-check-label(for='flexCheckDefault')
        | Default checkbox
.form-check
    input#flexCheckChecked.form-check-input(type='checkbox', value='', checked)
    label.form-check-label(for='flexCheckChecked')
        | Checked checkbox
.form-check
    input#flexCheckDisabled.form-check-input(type='checkbox', value='', disabled)
    label.form-check-label(for='flexCheckDisabled')
        | Disabled checkbox
Bootstrap's custom checkbox styling has been modified for the SB Admin Pro theme.
Bootstrap Custom Radio:
.form-check
    input#flexRadioDefault1.form-check-input(type='radio', name='flexRadioDefault')
    label.form-check-label(for='flexRadioDefault1')
        | Default radio
.form-check
    input#flexRadioDefault2.form-check-input(type='radio', name='flexRadioDefault', checked)
    label.form-check-label(for='flexRadioDefault2')
        | Default checked radio
.form-check
    input#flexRadioDefault3.form-check-input(type='radio', name='flexRadioDefault', disabled)
    label.form-check-label(for='flexRadioDefault3')
        | Default disabled radio
Bootstrap's custom radio styling has also been modified for the SB Admin Pro theme.
Solid Checkboxes & Radio
Custom Solid Checkboxes:
.form-check.form-check-solid
    input#flexCheckSolidDefault.form-check-input(type='checkbox', value='')
    label.form-check-label(for='flexCheckSolidDefault')
        | Default checkbox
.form-check.form-check-solid
    input#flexCheckSolidChecked.form-check-input(type='checkbox', value='', checked)
    label.form-check-label(for='flexCheckSolidChecked')
        | Checked checkbox
.form-check.form-check-solid
    input#flexCheckSolidDisabled.form-check-input(type='checkbox', value='', disabled)
    label.form-check-label(for='flexCheckSolidDisabled')
        | Disabled checkbox
The .custom-control-solid can be used with a .custom-control class to get a solid styling for custom checkboxes.
Custom Solid Radio:
.form-check.form-check-solid
    input#flexRadioSolid1.form-check-input(type='radio', name='flexRadioSolid')
    label.form-check-label(for='flexRadioSolid1')
        | Default radio
.form-check.form-check-solid
    input#flexRadioSolid2.form-check-input(type='radio', name='flexRadioSolid', checked)
    label.form-check-label(for='flexRadioSolid2')
        | Default checked radio
.form-check.form-check-solid
    input#flexRadioSolid3.form-check-input(type='radio', name='flexRadioSolid', disabled)
    label.form-check-label(for='flexRadioSolid3')
        | Default disabled radio
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.pe-0(type='text', placeholder='Input group append...', aria-label='Search')
    span.input-group-text
        i(data-feather='search')
// Joined input group prepend example
.input-group.input-group-joined
    span.input-group-text
        i(data-feather='search')
    input.form-control.ps-0(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.pe-0(type='text', placeholder='Input group append...', aria-label='Search')
    span.input-group-text
        i(data-feather='search')
// Joined input group solid prepend example
.input-group.input-group-joined.input-group-solid
    span.input-group-text
        i(data-feather='search')
    input.form-control.ps-0(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
.input-group.input-group-joined(style='width: 16.5rem;')
    span.input-group-text
        i(data-feather='calendar')
    input.form-control.ps-0.pointer#litepickerRangePlugin(placeholder='Select date range...')

This plugin is powered by a third party dependency called Litepicker. Visit the Litepicker documentation for more information and usage examples.

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