Form example demo

Vertical

We'll never share your email with anyone else.

Inline

:)

                    <form>
                        <div class="form-group">
                            <select class="form-control custom-select" id="exampleFormControlSelect1">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1"
                                aria-describedby="emailHelp" placeholder="Enter email">
                            <small id="emailHelp" class="form-text text-muted">We'll never share your
                                email with anyone else.</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1"
                                placeholder="Password">
                        </div>
                        <div class="form-check">
                            <label class="form-check-label" for="exampleCheck1">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                Check me out
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                

Addons input


                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Recipient's username"
                            aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button" id="button-addon2a">Button</button>
                        </div>
                    </div>
                

Checkbox


                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                        <label class="form-check-label" for="defaultCheck1">
                            Default checkbox
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
                        <label class="form-check-label" for="defaultCheck2">
                            Disabled checkbox
                        </label>
                    </div>
                

Datetime: datepicker

This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta


                    <div class="form-group">
                        <label>Default Functionality</label>
                        <div class="form-container-width">
                            <div class="input-group">
                                <div class="input-group" id="dateWrapper">
                                    <input type="text" class="form-control" placeholder="yyyy-mm-dd" id="datepicker"
                                        data-input>
                                    <div class="input-group-append">
                                        <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $('#dateWrapper').flatpickr({ wrap: true });
                            </script>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Date format</label>
                        <div class="form-container-width">
                            <div class="input-group" id="datepickerFormat">
                                <input type="text" class="form-control" placeholder="yyyy/mm/dd" data-input>
                                <div class="input-group-append">
                                    <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $('#datepickerFormat').flatpickr({
                                wrap: true,
                                dateFormat: 'Y/m/d'
                            });
                        </script>
                    </div>

                    <div class="form-group">
                        <label>Multiple Dates</label>
                        <div class="form-container-width">
                            <div class="input-group" id="datepicker-multiple-date">
                                <input type="text" class="form-control" placeholder="yyyy-mm-dd" data-input>
                                <div class="input-group-append">
                                    <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $('#datepicker-multiple-date').flatpickr({
                                    wrap: true,
                                    mode: 'multiple'
                                });
                            </script>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Date Range</label>
                        <div class="form-container-width">
                            <div class="input-group" id="date-range">
                                <input type="text" class="form-control" placeholder="yyyy-mm-dd to yyyy-mm-dd"
                                    data-input>
                                <div class="input-group-append">
                                    <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $('#date-range').flatpickr({
                                    wrap: true,
                                    mode: 'range'
                                });
                            </script>
                        </div>
                    </div>
                

Datetime timepicker

This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta


                    <div class="form-group">
                        <label>Default Functionality</label>
                        <div class="form-container-width" id="basicWrapper">
                            <div id="basicTimepciker" class="input-group col-sm-4">
                                <input type="text" class="form-control" placeholder="hh:mm" data-input>
                                <div class="input-group-append">
                                    <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                        <i class="fa fa-clock-o"></i>
                                    </button>
                                </div>

                            </div>
                            <script type="text/javascript">
                                $("#basicTimepciker").flatpickr({
                                    wrap: true,
                                    enableTime: true,
                                    noCalendar: true,
                                    time_24hr: true
                                });
                            </script>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>TimeFormat</label>
                        <div class="form-container-width">
                            <div id="timePicker-format" class="input-group col-sm-4">
                                <input type="text" class="form-control" data-input />
                                <div class="input-group-append">
                                    <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                        <i class="fa fa-clock-o"></i>
                                    </button>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $("#timePicker-format").flatpickr({
                                    wrap: true,
                                    enableTime: true,
                                    noCalendar: true,
                                    dateFormat: "H:i K",
                                    time_24hr: false
                                });
                            </script>
                        </div>
                    </div>
                

Datetime datepairer

This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta


                    <div class="form-group">
                        <label>Compare Date</label>

                        <div class="form-container-width">
                            <div id="datepair" class="row">
                                <div class="col-sm-6">
                                    <div class="input-group" id="datepairStart">
                                        <input type="text" class="form-control" placeholder="start date" data-input>
                                        <div class="input-group-append">
                                            <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                                <i class="fa fa-clock-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="input-group" id="datepairEnd">
                                        <input type="text" provide="datepicker" class="form-control"
                                            placeholder="end date" data-input>
                                        <div class="input-group-append">
                                            <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                                <i class="fa fa-clock-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            var startPicker = $("#datepairStart").flatpickr({
                                wrap: true,
                                onChange: function (dateObj, dateStr) {
                                    var endDate = endPicker.selectedDates[0];
                                    if (endDate < dateObj[0]) {
                                        endPicker.setDate(dateStr, true);
                                    }
                                }
                            });
                            var endPicker = $("#datepairEnd").flatpickr({
                                wrap: true,
                                onChange: function (dateObj, dateStr) {
                                    var startDate = startPicker.selectedDates[0];
                                    if (startDate > dateObj[0]) {
                                        startPicker.setDate(dateStr, true);
                                    }
                                }
                            });

                        </script>
                    </div>

                    <div class="form-group">
                        <label>Compare Time</label>
                        <div class="form-container-width">
                            <div id="timepair" class="row">
                                <div id="timepairStart" class="input-group col-sm-4">
                                    <input type="text" class="form-control" placeholder="start time" data-input>
                                    <div class="input-group-append">
                                        <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                            <i class="fa fa-clock-o"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="timepairEnd" class="input-group col-sm-4">
                                    <input type="text" class="form-control" placeholder="end time" data-input>
                                    <div class="input-group-append">
                                        <button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
                                            <i class="fa fa-clock-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            var startPicker = $("#timepairStart").flatpickr({
                                wrap: true,
                                enableTime: true,
                                noCalendar: true,
                                time_24hr: true,
                                onChange: function (dateObj, dateStr) {
                                    var endDate = endPicker.selectedDates[0];
                                    if (endDate < dateObj[0]) {
                                        endPicker.setDate(dateStr, true);
                                    }
                                }

                            });
                            var endPicker = $("#timepairEnd").flatpickr({
                                wrap: true,
                                enableTime: true,
                                noCalendar: true,
                                time_24hr: true,
                                onChange: function (dateObj, dateStr) {
                                    var startDate = startPicker.selectedDates[0];
                                    if (startDate > dateObj[0]) {
                                        startPicker.setDate(dateStr, true);
                                    }
                                }
                            });
                        </script>
                    </div>
                

File input


                    <div class="input-group mb-3">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="inputGroupFile01"
                                aria-describedby="inputGroupFileAddon01">
                            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                        </div>
                    </div>
                

Input text

Form-text

                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1"
                                aria-describedby="emailHelp" placeholder="Enter email">
                            <small id="emailHelp" class="form-text text-muted">Form-text</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">Example textarea</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </form>
                

Radio


                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
                            value="option1" checked>
                        <label class="form-check-label" for="exampleRadios1">
                            Default radio
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
                            value="option2">
                        <label class="form-check-label" for="exampleRadios2">
                            Second default radio
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
                            value="option3" disabled>
                        <label class="form-check-label" for="exampleRadios3">
                            Disabled radio
                        </label>
                    </div>
                

Range


                    <form>
                        <div class="form-group">
                            <label for="formControlRange">Example Range input</label>
                            <input type="range" class="form-control-range" id="formControlRange">
                        </div>
                    </form>
                

Select


                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="inputGroupSelect01">Options</label>
                        </div>
                        <select class="custom-select" id="inputGroupSelect01">
                            <option selected>Choose...</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                

Switch


                    <div class="custom-control custom-switch custom-switch-blue">
                        <input type="checkbox" class="custom-control-input" id="customSwitch1">
                        <label class="custom-control-label" for="customSwitch1">I am primary</label>
                    </div>

                    <div class="custom-control custom-switch custom-switch-green">
                        <input type="checkbox" class="custom-control-input" id="customSwitch2">
                        <label class="custom-control-label" for="customSwitch2">I am success</label>
                    </div>

                    <div class="custom-control custom-switch custom-switch-blue">
                        <input type="checkbox" disabled class="custom-control-input" id="customSwitch1b">
                        <label class="custom-control-label" for="customSwitch1b">I am disabled</label>
                    </div>

                    <div class="custom-control custom-switch custom-switch-blue">
                        <input type="checkbox" checked class="custom-control-input" id="customSwitch1a">
                        <label class="custom-control-label" for="customSwitch1a">I am primary
                            checked</label>
                    </div>

                    <div class="custom-control custom-switch custom-switch-green">
                        <input type="checkbox" checked class="custom-control-input" id="customSwitch2a">
                        <label class="custom-control-label" for="customSwitch2a">I am success
                            checked</label>
                    </div>

                    <div class="custom-control custom-switch custom-switch-blue">
                        <input type="checkbox" checked disabled class="custom-control-input" id="customSwitch1b">
                        <label class="custom-control-label" for="customSwitch1b">I am checked and
                            disabled</label>
                    </div>
                

v1.0.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d