##### Mannat Themes

We Design and Develop Clean and High Quality Web Applications

Upgrade your plan

#### Form Elements

Today: Jan 11

#### Textual inputs

Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.

Text
Email
Telephone
Password
Number
Date and time
Color
Select
Custom Select
Large
Small
Search
URL
Date
Month
Week
Time
Email
Success! You've done it.
Example help text that remains unchanged.
Email
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Email
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

#### Basic Form

Basic example to demonstrate Bootstrap’s form styles.

Email address We'll never share your email with anyone else.
Password
Check me out

#### Horizontal form

Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.

Email
Password
Remember me

#### Custom styles

Custom stylr example.

Name
Email address
Subject
Message

#### Inline Form

Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states..

Email address
Password
Remember me

#### Input Size

Set heights using classes like `.form-control-lg` and `.form-control-sm`.

#### File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

Here’s `lang(es)` in action on the custom file input for a Spanish translation:

Seleccionar Archivo

#### Form controls

Basic example to demonstrate Bootstrap’s form styles.

Email address
Example select
Example multiple select
Example textarea

#### Range

Create custom `<input type="range">` controls with `.custom-range`.

Example range Example range Max step 0.5

#### Range Inputs

Set horizontally scrollable range inputs using `.form-control-range`.

Example Range input

#### Switches

A switch has the markup of a custom checkbox but uses the `.custom-switch` class to render a toggle switch. Switches also support the `disabled` attribute.

Toggle this switch element
Disabled switch element
Primary
Secondary
Success
Warning
Info
Danger
Dark
Purple
Pink
Blue

#### Checkboxs

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes
Unchecked
Checked
Disabled Unchecked
Disabled Checked
Inline Checkboxes
HTML
CSS
Javascript

#### Radios

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Radios
checked
checked
Disabled radio
Disabled selected
Inline Radios
HTML
css
Javascript

#### Bootstrap Supported elements

Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.

Check this custom checkbox
Example invalid feedback text
Toggle this custom radio
Or toggle this other custom radio
More example invalid feedback text
Example invalid custom select feedback
Choose file...
Example invalid custom file feedback

#### Validation Form Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

#### Input groups Static

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Left Addon
Right Addon
Both Side Addon
.00
Left Side Joint Addons
0.00
Left Addons With Textarea
With textarea
Password
First and last name

#### Input groups Buttons

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Password
Password
Password
Password
Password
Password
Password
Choose file
Password