Use the examples below to build your forms.
All form elements like, inputs, selects, textareas should have the .form-controlCSS class. Each form row should have the .form-groupCSS class.
To create an inline form add the .form-inlineCSS class to the <form>element.
To create a horizontal form add the .form-horizontalCSS class to the <form>element.
Use the markups below to create form layouts with checkboxes.
Use the markup below to vertically align checkbox inputs.
Use the .checkbox-inlineclasses on a series of checkboxes or checkboxes for controls that appear on the same line.
Add the .custom-checkboxCSS class to the checkbox input that you would like to have custom styling.
You can use the color helper CSS classes to add different backgrounds to the custom checkbox inputs.
The .checkbox-primarycolor can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.
| Result | Helper class | Description |
|---|---|---|
.checkbox-primary | This is the primarybackground color. |
The color helper classes below come packed with the framework.
| Result | Helper class | Description |
|---|---|---|
.checkbox-success | Used for successactions. | |
.checkbox-danger | Used for erroractions. | |
.checkbox-warning | Used for warningactions. | |
.checkbox-info | Used for informationactions. |
Use the markups below to create form layouts with radios.
Use the markup below to vertically align radio inputs.
Use the .radio-inlineclasses on a series of radios or radios for controls that appear on the same line.
Add the .custom-inputCSS class to the radio input that you would like to have custom styling.
You can use the color helper CSS classes to add different backgrounds to the custom radio inputs.
The .radio-primarycolor can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.
| Result | Helper class | Description |
|---|---|---|
.radio-primary | This is the primarybackground color. |
The color helper classes below come packed with the Supina Framework.
| Result | Helper class | Description |
|---|---|---|
.radio-success | Used for successactions. | |
.radio-danger | Used for erroractions. | |
.radio-warning | Used for warningactions. | |
.radio-info | Used for informationactions. |
Use the markups below to create select inputs.
To disable a select input, add the disabledparameter to it.
Use the markups below to create input switches.
Add the .input-switchCSS class to any checkbox or radio to create custom input switches.
You can use the color helper CSS classes to add different backgrounds to the custom input switches. You can change the color using the data-on-colorparameter for the "On" state and data-off-colorparameter for the "Off" state. Accepted values are primary, info, success, warning, danger, default
You can change the size of the input switches using the data-sizeparameter. Accepted values are mini, small, normal, large.
Use the markups below to create select inputs with custom styling.
Add the .custom-selectCSS class to the radio input that you would like to have custom styling.
To create custom select inputs with searchable results you need to add the .chosen-selectCSS class to the select input. Use the data-placeholder="Title here..."to add a title to the custom select. To make a Chosen select disabled, add the disabledparameter to it.
To create multiselect inputs, you need to add the multipleparameter to a select input.
To apply custom styling to multiple select inputs, add the .form-controlCSS class.
To create custom multiselect inputs with searchable results you need to add the .chosen-selectCSS class to the select input and the multipleparameter.
To transform a basic multiple select input into a multiselect list, you need to add the .multi-selectCSS class to it.
To apply styling to any textarea, you need to add to it the .form-controlCSS class.
Below you will find a basic textarea example. Disable textarea by adding either the .disabledCSS helper class or the disabledparameter.
Textarea can have one of the following heights: .textarea-xs, .textarea-sm, .textarea-md, .textarea-lg.
Add the .textarea-no-resizeCSS class to textareas to remove the possibility of resize.
Add the .textarea-autosizeCSS class to textareas to auto-resize textareas as you type more text into them.
Add the .textarea-counterCSS class to textareas to add a remaining characters counter.
Use the markups below to create text inputs.
To apply styling to input fields, you need to add to it the .form-controlCSS class. Add the disabledparameter to a text input to disable it.
To create autocomplete inputs you need to add the .autocomplete-inputCSS class to an input field.
To create a spinner input you need to add the .spinner-inputCSS class to an input field.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-groupwith an .input-group-addonto prepend or append elements to a single .form-control.
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
Add the relative form sizing classes to the .input-groupitself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Place any checkbox or radio option within an input group's addon instead of text.
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btnto wrap the buttons. This is required due to default browser styles that cannot be overridden.
Wrap <i class="glyph-icon icon-cog"></i>elements inside .input-group-addonto create outer icon addons.
Wrap <i class="glyph-icon icon-cog"></i>elements inside .input-group-addonto create inner icon addons.
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
