Forms Choose between tons of combinations & possibilites that our themes offer to create all kinds of form elements & layouts.

Layouts

Use the grid system to create form layouts. You can also control the width of the labels and the input wrapper and the number of form columns.

Horizontal labels

Using the grid system you can control the position of the labels. The form example below has the col-md-6 which sets the width to 50% and center-margin which centers it.

Vertical labels

For making labels vertical you have two options, either use the apropiate grid .col- class or wrap the form in the form-vertical class.

Right aligned labels

Both the horizontal and vertical form layouts can have the label texts left or right aligned. By default the label text is left aligned. To right align it you need to either add the text-right helper class to it or by adding the form-label-right class to an element that wraps multiple labels.

Labels descriptions

Both vertical and horizontal labels can have descriptions. You can change the color of the descriptions by using the core font color helpers.

Select inputs

Select inputs can have different sizes and styling. You can also have select inputs that use different styling from the browser default one.

Custom select inputs

Custom select inputs maintain the dropdown browser styling.

Chosen selects

Chosen select inputs completly restyles the select inputs to be more user-friendly and have additional options.

Chosen multiple select

Chosen multiple selects transforms the regular multiselect box into in input with tags maintaing the same functionality.

Textareas

Textareas can have 4 different height sizes that can be set by adding a CSS helper class to the actual textarea. Available height sizes are: small-textarea, medium-textarea, large-textarea and textarea-autosize - sets the height based on the text you write inside. For widths you can use the grid system helper classes as shown in the examples below.

Checkbox inputs

Checkbox inputs can have a vertical or horizontal orientation.

Custom checkbox inputs

Custom checkbox inputs have a different styling than the browser default checkbox styling. You can create a custom checkbox input by adding the custom-checkbox class to it.

Radio inputs

Radio inputs can have a vertical or horizontal orientation.

Custom radio inputs

Custom radio inputs have a different styling than the browser default radio input styling. You can create a custom radio input by adding the custom-radio class to it.

Text inputs

Text inputs can have different styles & sizes, multiple left/right icons and buttons. To control text inputs widths you can use the grid system helper classes as shown in the examples below.

Icons

You can append icons to text inputs to the left, right or both.

Icons inside

You can append icons to text inputs to the left, right or both.

Multiple icons

Text inputs can have more than one icon appended to them. Check the examples below.

Inputs with buttons

Text inputs can have more than one icon appended to them. Check the examples below.

Validation response

Use the box shadow core helper classes to style inputs for different validation responses: error, warning, success, info, notice.

Submit buttons

Submit buttons are styled like any other Fides Admin button. You can use both the theme & core color schemes.

Bordered form layout

The form layouts can also be bordered like in the example below. To create bordered layouts you need to wrap your form in an element with class form-bordered.

Forms validation

You can easily and quickly create form validation rules directly from the DOM, without writing additional javascript.