Form

Forms are used to send and collect data.

Angular grayed logo
Angular coming soon

Example

Your lastname must have 5 characters
We'll never share your email with anyone else.
<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
.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
We'll never share your email with anyone else.
We'll never share your email with anyone else.
We'll never share your email with anyone else.
<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
email
warning
<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>

Search widget

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>

Password widget

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

visibility_off visibility
<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>