Form

Forms are used to send and collect data.

Angular coming soon

Example

<form>
  <div class="nj-form-group">
    <input type="text" class="nj-form-control" id="exampleInputFirstName" placeholder="Your firstname...">
    <label for="exampleInputFirstName" class="nj-label-static">Firstname</label>
  </div>
  <div class="nj-form-group">
    <input type="text" class="nj-form-control" id="exampleInputLastName" minlength="5">
    <label for="exampleInputLastName" class="nj-label-floating">Lastname</label>
    <span class="nj-help">Your lastname must have 5 characters</span>
  </div>
  <div class="nj-form-group">
    <input type="email" class="nj-form-control" id="exampleInputEmail" autocomplete="email">
    <label for="exampleInputEmail" class="nj-label-floating">Email address</label>
    <span class="nj-help">We'll never share your email with anyone else.</span>
  </div>
  <div class="nj-form-group">
    <input type="password" class="nj-form-control" id="exampleInputPassword" autocomplete="password">
    <label for="exampleInputPassword" class="nj-label-floating">Password</label>
  </div>
  <div class="nj-form-group">
    <textarea class="nj-form-control" name="exampleTextarea" id="exampleTextarea" cols="30" rows="3"></textarea>
    <label for="exampleTextarea" class="nj-label-floating">Description textarea</label>
  </div>
</form>

Usage

Text fields are used in forms to help people enter any type of text. Most often by using this input the user is free on the item he wants to enter. Common types of text input include: usernames, descriptions, URLs, emails, etc…

The structure of the input :

Label : It indicates the type of information required by the control.
Placeholde : Allows users to know how they should use the field. For example: “Solar panel, wind turbine …”. This is where people enter the text they want to fill in.
Help text : gives a context on the entry of a field. It could be an instruction, a confirmation or an error.

In a database, the completion of a user “Solar pannel” will not be the same as “solar pannel”. Prefer to use a select field when you want to be more specific.

Labels

Below is a complete list of <label> class options supported by Fluid Design System:

Classes Notes

Classes	Notes
`.nj-label-static`	Statically positioned above the input
`.nj-label-placeholder`	Renders a `<label>` as a placeholder focused: not visible after first keystroke unfocused & empty: placeholder unfocused & filled: not visible do not use the placeholder attribute with this option
`.nj-label-floating`	Animated combination of placeholder and label: focused: label animates from placeholder to static label unfocused & empty: placeholder unfocused & filled: renders the same as `.nj-label-static`

.nj-label-static

Statically positioned above the input

.nj-label-placeholder

Renders a <label> as a placeholder

focused: not visible after first keystroke
unfocused & empty: placeholder
unfocused & filled: not visible
do not use the placeholder attribute with this option

.nj-label-floating

Animated combination of placeholder and label:

focused: label animates from placeholder to static label
unfocused & empty: placeholder
unfocused & filled: renders the same as .nj-label-static

<form>
  <fieldset class="nj-form-group">
    <label for="exampleInputEmail1" class="nj-label-static">label-static</label>
    <input type="email" class="nj-form-control" id="exampleInputEmail1" placeholder="placeholder text">
    <span class="nj-help">We'll never share your email with anyone else.</span>
  </fieldset>
  <fieldset class="nj-form-group">
    <label for="exampleInputEmail2" class="nj-label-floating">label-floating</label>
    <input type="email" class="nj-form-control" id="exampleInputEmail2">
    <span class="nj-help">We'll never share your email with anyone else.</span>
  </fieldset>
  <fieldset class="nj-form-group">
    <label for="exampleInputEmail3" class="nj-label-placeholder">label-placeholder</label>
    <input type="email" class="nj-form-control" id="exampleInputEmail3">
    <span class="nj-help">We'll never share your email with anyone else.</span>
  </fieldset>
</form>

Column sizing

Our grid system allows you to place any number of .cols within a .row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

<form>
  <div class="row">
    <div class="col-7 nj-form-group">    
      <input type="text" class="nj-form-control" placeholder="City">
    </div>
    <div class="col nj-form-group"> 
      <input type="text" class="nj-form-control" placeholder="State">
    </div>
    <div class="col nj-form-group">
      <input type="text" class="nj-form-control" placeholder="Zip">
    </div>
  </div>
</form>

Inputs with icon

Static icon

To add an icon on the left or the right of the input, you can add a modifier on nj-form-group tag :

.nj-form-group--icon-left
.nj-form-group--icon-right

<div class="nj-form-group nj-form-group--icon-left">
  <label for="exampleInputEmailWithIcon" class="nj-label-floating">Email</label>
  <input type="email" class="nj-form-control" id="exampleInputEmailWithIcon">
  <i class="material-icons">email</i>
</div>

<div class="nj-form-group nj-form-group--icon-right">
  <input class="nj-form-control" type="text" placeholder="Warning">
  <i class="material-icons">warning</i>
</div>

To enable custom search widget mechanism with the reset button add the .nj-form-input-search class.

<div class="nj-form-group nj-form-input-search nj-form-group--icon-right">
  <input class="nj-form-control" type="text" placeholder="Search">
  <i class="material-icons nj-form-control__search">search</i>
  <i class="material-icons nj-form-control__reset">close</i>
</div>

To enable custom password widget mechanism with the visibility toggle button add the .nj-form-input-password class.

Password

<div class="nj-form-group nj-form-input-password nj-form-group--icon-right">
  <input type="password" class="nj-form-control is-prepended" id="exampleInputPasswordWidget" autocomplete="password" minlength="5">
  <i class="material-icons nj-form-control__password-off">visibility_off</i>
  <i class="material-icons nj-form-control__password-on">visibility</i>
  <label for="exampleInputPasswordWidget" class="nj-label-floating">Password</label>
</div>

Footer

Grid