Success States

Unify's form controls extend on Bootstrap forms with classes. In all examples, .form-control-md class is used to change Bootstrap's default form size. Also, all form styles can be extended with Unify's global classes.

Text Inputs

First view

Text input This is a required field.

Input with autocomplete This is a required field.

Text input with right appended icon

This is a required field.

Text Input with left appended icon

This is a required field.

Second view

Text input This is a required field.

Input with autocomplete This is a required field.

Text input with right appended icon

This is a required field.

Text Input with left appended icon

This is a required field.

Third view

Text input This is a required field.

Input with autocomplete This is a required field.

Text input with right appended icon

This is a required field.

Text Input with left appended icon

This is a required field.

{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Textareas

First view

Textarea This is a required field.

Textarea resizable This is a required field.

Textarea expandable This is a required field.

Textarea with right appended icon

This is a required field.

Text input with left prepended icon

This is a required field.

Second view

Textarea This is a required field.

Textarea resizable This is a required field.

Textarea expandable This is a required field.

Textarea with right appended icon

This is a required field.

Text input with left prepended icon

This is a required field.

Third view

Textarea This is a required field.

Textarea resizable This is a required field.

Textarea expandable This is a required field.

Textarea with right appended icon

This is a required field.

Text input with left prepended icon

This is a required field.

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

File Inputs (attachments)

First view

File input

Second view

File input

This is a required field.

Third view

File input

This is a required field.

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Quantities

First view

Quantity

Second view

Quantity

This is a required field.

Quantity

This is a required field.

Third view

Quantity

This is a required field.

Quantity

This is a required field.

{% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Note!

Please note, the third view .u-has-error-v1-3 class does not support fixed width quantities.

Toggles

Toggles based on radios

inof@htmlstream.com

hello@google.com

admin@yahoo.com

Toggles based on checkboxes

inof@htmlstream.com

hello@google.com

admin@yahoo.com

{% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Success States

Text Inputs

First view

Second view

Third view

Textareas

First view

Second view

Third view

File Inputs (attachments)

First view

Second view

Third view

Quantities

First view

Second view

Third view

Note!

Radios Options

Columned radios

Inline radios

Radio Group

Checkbox Options

Columned checkboxes

Inline checkboxes

Checkboxes Group

Toggles

Toggles based on radios

Toggles based on checkboxes