ParaGRIDma v2

Inputs

Default Text Input

Input with autofocus

Label

Label description of the field

Label with error description of the field

Label

Label with password

Disabled Input

Inline/Horizontal Inputs

inline Input

Inputs info

All form components must be inside a <div class="fg">
Default state is: Label above form field (like a block element). This improve form's readibility.
All text input must have the class="text"
But we can display inline forms items wrapping form elements with the class="fh"
Size class: Input can have one of those classes: large or small
We can insert field annotations width: <small>notes</small>
To show an error in an input we must add class="fg_error" to the wrapper element.
If we want that the field show a placeholder text we must add attribute placeholder="text" in the input

Selects / Dropdown

Default Combo

Small Combo

Large Combo description of the field

Default Combo

Disabled Combo

Inline Combo

Textarea

Default Textarea

Large Textarea

Default Textarea description of the field

Disabled Textarea

Dropdown & Text area info

All form components must be inside a <div class="fg">
Default state is: Label above form field (like a block element). This improve form's readibility.
Size class: Combos can have one of those classes: large or small
We can display inline forms items wrapping form elements with the class="fh"
We can insert field annotations width: <small>notes</small>
To show an error in an input we must add class="fg_error" to the wrapper element.

Radio

Radio Group

option 1

option 2

option 3

Radio Group

option 1

option 2

option 3

Inline Radio Group

op.1

op.2

op.3

Checkbox & Radio info

This is a checkbox structure:

<div class="fg checkboxGroup">
  <label>Checkbox Group</label>
  <div class="options">
    <div class="option">
      <input type="checkbox" id="name" class="checkbox">
      <label for="name">option 1</label>
    </div>
    <div class="option">
      <input type="checkbox" id="name" class="checkbox">
      <label for="name">option 2</label>
    </div>
  </div>
</div>

This is a Radiogroup structure:

<div class="fg radioGroup">
  <label>Radio Group</label>
  <div class="options">
    <div class="option">
      <input type="radio" id="name" class="radio">
      <label for="name">option 1</label>
    </div>
    <div class="option">
      <input type="radio" id="name" class="radio">
      <label for="name">option 2</label>
    </div>
  </div>
</div>

To show inline checkbox or radios you must wrap your form component in a class="fh"

Componente Multiselección

Multiselección Info

Dependendencia de jquery.localisation.min.js (documentado en la sección de textos)
Creación: $(".multiselect").multiselect();
El combo utiliado deberá tener la propiedad multiple="multiple"

Nuestro framework CSS + Javascript

Forms