Yammer Teams Slack email

Form

Forms are used to send and collect data.

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>

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.

search close 
<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>