Input
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Input Types
Check input type options below that can be used :
| Input Types | Usage |
|---|---|
| Input text type | <input type="text"> |
| Password Input | <input type="password"> |
| Telephone Number | <input type="tel"> |
| Email field | <input type="email"> |
| URL field | <input type="url"> |
| Search Input | <input type="search"> |
| Number Input | <input type="number"> |
| Date Time | <input type="datetime-local"> |
| Date | <input type="date"> |
| Time | <input type="time"> |
| Week | <input type="week"> |
| Month | <input type="month"> |
| Color | <input type="color"> |
| Range | <input type="range"> |
Input Style
Use .form-group-style class with .form-group class which contains label and form
field.
Find input style options below :
| Input style options | Class | Description |
|---|---|---|
| Rounded Input | .round |
Use this class for round styled input. |
| Square Input | .square |
Use this class for square styled input. |
| Input Sizing | .input-[xl/lg/sm] |
Use this class for different input sizing. |
| Input with Icons | .has-icon-left |
Default icon align is right. For left align icon use this class. |
| Input Background Color | .bg-* |
Use this class for background color from THEME_COLOR. |
| Input Border Color | .border-* |
Use this class for border color from THEME_COLOR. |
More input style example can be like :
| Example Type | URL |
|---|---|
| Input type examples | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/forms/inputs |
Input Form Validation
Check input form validation option below :
| Form Validation | Class | Description |
|---|---|---|
| Danger State | .has-danger |
Use this class for danger state |
| Success State | .has-success |
Use this class for success state |
| Warning State | .has-warning |
Use this class for warning state |
More form validation example can be like :
| Example Type | URL |
|---|---|
| ngx-custom-validators | https://github.com/rsaenen/ngx-custom-validators |
| Form validation examples | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/forms/validation |
Input Groups
Use .input-group class with an .input-group-addon class to prepend or append
elements to a .form-control. Place one add-on or button on either side of an input. You may also
place one on both sides of an input. It does not support multiple add-ons on a single side, nor
multiple form-controls in a single input group.
Check input group options below that can be used :
| Input Group Options | Class | Description |
|---|---|---|
| Input Group | .input-group-addon |
To add input group addon to input. To add icon to left, add span with this class before. To add icon to right, add span using class after. You can add add-on to both the sides too. |
| Input Group Sizing | .input-group-[lg/sm] |
For large,small & Extra small input groups. |
| Input Group Buttons | .input-group-btn |
To add input group button to input. To add button to left, add span with this class before. To add button to right, add span using this class after. You can add button to both the sides too. |
| Input Group add-on bg color | .bg-* |
To color using this class to the addon. |
| Input Group validation | .has-[danger/success/warning] |
For danger/success/warning input group validation. |
| Input Group validation with icon | .form-control-[danger/success/warning] |
Use this class to add icon with input group validation. |
Here are Input group example below :
- Input group
- Input group with checkbox & Radio
- Input group sizing
- Input group buttons
- Input group dropdown, etc..
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Bootstrap Link | https://getbootstrap.com/docs/4.0/components/input-group/ |
| Template Page | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/forms/input-groups |