Forms

Default Forms

Tutorio supports all of Bootstrap's default form styling in addition to a handful of new input types and features. Please read the official documentation for a full list of options from Bootstrap's core library.

Form Validation

Provide valuable, actionable feedback to your users with HTML5 form validation. Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

Please provide a first name.
Looks good!
Please provide a last name.
Looks good!
Please provide a valid city.
Looks good!
Please provide a valid state.
Looks good!

Search

A dedicated form group alternative for search forms that always keeps the submit button as part of the form control.

Merge Group

A slightly modified version of the default input groups that always keeps icons as a part of the form control. Also works with validation.

remove_red_eye
lock_outline
remove_red_eye
lock_outline

Rounded

Form control with rounded corners with the .form-control-rounded modifier.

Flush

Remove paddings and borders from a form control with the .form-control-flush modifier.

Toggle

Replaces a standard checkbox input with a toggle button.


Custom controls

Date Picker

A simple yet powerful datepicker powered by Flatpickr. Please read the official plugin documentation for a full list of options.

Input Masking

Mask your form controls depending on the context with the jQuery Mask plugin. Please read the official plugin documentation for a full list of options.

Input Spinner

A mobile and touch friendly input spinner component. It supports the mouse wheel and the up & down keys.

Rich Text Editor

Powerful WYSIWYG text editor powered by Quill. Please read the official plugin documentation for a full list of options.

Hello World!

Some initial bold text


Hello World!

Some initial bold text