Input Example

Must be 8-20 characters long.

Input Sizing

Use form-control-lg class to set large size input and Use form-control-sm class to set small size input. No class is needed for default size input.

File Input

Use input attribute with type="file" tag for default file input

Use multiple attribute within the input attribute to select multiple files.

Use disabled attribute within the input attribute to disable the file input.

File Input Sizing

Use form-control-sm class within the form-control class to set a small size file input.

Use form-control class and type="file" attribute within the input attribute to set a default size file input.

Use form-control-lg class within the form-control class to set a large size file input.

Input Group

Basic example

Use input-group class to div element which contains input attribute to wrap a default input in the group.

@
@example.com
$ .00
@
With textarea
https://example.com/users/
Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with flex-nowrap class.

@

Input Group Sizing

Use input-group-sm class to set a small size input group and input-group-lg class to input-group class to set a large size input group respectively. no such class is required for a default size input group.

Small
Default
Large

Multiple Inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

First and last name
$ 0.00
$ 0.00

Buttons, Checkboxs and Radios Group

Use any checkbox, radio, or button option within an input group’s addon instead of text. We recommend adding mt-0 class to the form-check-input when there’s no visible text next to the input.

Buttons with dropdowns

Custom Forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Select
File Input
© Dosix.
Design & Develop by Themesbrand