{% set title = 'Input' %} {% set filename = 'form-element-input.html' %} {% extends 'src/layouts/master.html' %} {% block content %}

### Input

Give textual form controls like input upgrade with custom styles, sizing, focus states, and more.

#### Basic Inputs

Basic Input
Input text with help eg.someone@example.com
With Helper Text

Find helper text here for given textbox.

Disabled Input
Readonly Input
Static Text

email@mazer.com

#### Input Styles

To set rounded border to input box, use `.round` class and to set square border to input box, use `.sqaure` class alongwith `.form-control` class.

Rounded Input
Square Input

#### Horizontal Input

To make label in center of form-control, use `.col-form-label` class with `<label>` element. This is default bootstrap class.

First Name
Last Name

#### File Input

Default file input example
Multiple files input example
Disabled file input example
Small file input example
Large file input example

#### Input with Icons

For Input Box with icon use `.position-relative` class with `.form-group` and use class `.has-icon-left` or `.has-icon-right` class for icon on left side.

###### Left Icon

###### Right Icon

#### Control Sizing Option

For different sizes of Input, Use classes like `.form-control-lg` & `.form-control-sm` for Large, Small input box.

###### Large

###### Default

###### Small

#### Input Validation States

You can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

Valid State
This is valid state.
Invalid State
This is invalid state.
{% endblock %}