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 Style start */}

Input Styles

To set rounded border to input box, use .round{" "} class and to set square border to input box, use{" "} .square class alongwith .form-control class.

Rounded Input

Square Input

{/* Input Style end */} {/* Horizontal Input start */}

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

{/* Horizontal Input end */} {/* Basic File Browser start */}

File Input

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

{/* Basic File Browser end */} {/* Input with Icons start */}

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

{/* Input with Icons end */} {/* Input Sizing start */}

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 Sizing end */} {/* validations start */}

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.

{/* validations end */}