Yammer Teams Slack email

Form

Forms are used to send and collect data.

Example

Use only the tags belowif you choose the Web Component initialization method with Angular, React or VueJs frameworks. If you are using an older version or any JavaScript frameworks, do not use these tags and keep only the HTML inside.
<nj-form-input-text></nj-form-input-text>
<nj-form-input-password></nj-form-input-password>
<nj-form-input-search></nj-form-input-search>
Your lastname must have 5 characters
We'll never share your email with anyone else. 
<form>
  <div class="nj-form-group">
    <nj-form-input-text>
      <input type="text" class="nj-form-control" id="exampleInputFirstName" placeholder="Your firstname...">
      <label for="exampleInputFirstName" class="nj-label-static">Firstname</label>
    </nj-form-input-text>
  </div>
  <div class="nj-form-group">
    <nj-form-input-text>
      <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>
    </nj-form-input-text>
  </div>
  <div class="nj-form-group">
    <nj-form-input-text>
      <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>
    </nj-form-input-text>
  </div>
  <div class="nj-form-group">
    <nj-form-input-password>
      <input type="password" class="nj-form-control" id="exampleInputPassword" autocomplete="password">
      <label for="exampleInputPassword" class="nj-label-floating">Password</label>
    </nj-form-input-password>
  </div>
  <div class="nj-form-group">
    <nj-form-input-textarea>
      <textarea class="nj-form-control" name="exampleTextarea" id="exampleTextarea" cols="30" rows="3"></textarea>
      <label for="exampleTextarea" class="nj-label-floating">Description textarea</label>
    </nj-form-input-textarea>
  </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">
    <nj-form-input-text>
      <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>
    </nj-form-input-text>
  </fieldset>
  <fieldset class="nj-form-group">
    <nj-form-input-text>
      <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>
    </nj-form-input-text>
  </fieldset>
  <fieldset class="nj-form-group">
    <nj-form-input-text>
      <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>
    </nj-form-input-text>
  </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">
      <nj-form-input-text>
        <input type="text" class="nj-form-control" placeholder="City">
      </nj-form-input-text>
    </div>
    <div class="col nj-form-group">
      <nj-form-input-text>
        <input type="text" class="nj-form-control" placeholder="State">
      </nj-form-input-text>
    </div>
    <div class="col nj-form-group">
      <nj-form-input-text>
        <input type="text" class="nj-form-control" placeholder="Zip">
      </nj-form-input-text>
    </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 
<nj-form-input-text>
  <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>
</nj-form-input-text>
<nj-form-input-text>
  <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>
</nj-form-input-text>

Search widget

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

search close 
<nj-form-input-search>
  <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>
</nj-form-input-search>

Password widget

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

visibility_off visibility 
<nj-form-input-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>
</nj-form-input-password>