Input / Form item

Inputs are used in forms to help people provide information.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

States
- Required, readonly and disabled)
- Error
Variations
Types
- Number
- Password
- Search
- Textarea
Layout and column sizing example

Example

Fluid provides two types of text fields: floating (default) and static.

For floating inputs, an empty placeholder is MANDATORY.

Our inputs are pure css components and require no additional javascript. In order to create the floating label, an empty placeholder is needed.

The label indicates the type of information required by the control.

Floating

<form>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleFloatingInput" placeholder="default">
      <label for="exampleFloatingInput" class="nj-form-item__label">Floating</label>
    </div>
  </div>
</form>

Static

<form>
  <div class="nj-form-item nj-form-item--static">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleStaticInput" placeholder="Static text field example">
      <label for="exampleStaticInput" class="nj-form-item__label">Static</label>
    </div>
  </div>
</form>

Floating

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputFirstName" placeholder="default">
      <label for="exampleInputFirstName" class="nj-form-item__label">Firstname</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputLastNameFloating" placeholder="default">
      <label for="exampleInputLastNameFloating" class="nj-form-item__label">Lastname</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputEmail" placeholder="default" required>
      <label for="exampleInputEmail" class="nj-form-item__label">Email</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--password">
    <div class="nj-form-item__field-wrapper">
      <input type="password" class="nj-form-item__field" id="examplePasswordFloating" placeholder=" " required>
      <label for="examplePasswordFloating" class="nj-form-item__label">Password</label>
      <button type="button" aria-pressed="false" class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg nj-icon-btn--tertiary">
        <span class="nj-sr-only" data-password-button-label-show="Show password" data-password-button-label-hide="Hide password"></span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">visibility</span>
      </button>
      <p class="nj-sr-only nj-form-item__password-notice" aria-live="polite" aria-atomic="true" data-password-notice-is-visible="Password is visible" data-password-notice-is-hidden="Password is hidden"></p>
    </div>
    <div class="nj-form-item__subscript">Must be x character long</div>
  </div>
  <div class="nj-form-item nj-form-item--textarea">
    <div class="nj-form-item__field-wrapper">
      <textarea class="nj-form-item__field" id="exampleTextAreaFloat" placeholder="Comment"></textarea>
      <label for="exampleTextAreaFloat" class="nj-form-item__label">Comment</label>
    </div>
  </div>
</form>

Static

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item nj-form-item--static">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputFirstNameStatic" placeholder="default">
      <label for="exampleInputFirstNameStatic" class="nj-form-item__label">Firstname</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--static">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputLastName" placeholder="default">
      <label for="exampleInputLastName" class="nj-form-item__label">Lastname</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--static">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputEmailStatic" placeholder="default" required>
      <label for="exampleInputEmailStatic" class="nj-form-item__label">Email</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--static nj-form-item--password">
    <div class="nj-form-item__field-wrapper">
      <input type="password" class="nj-form-item__field" id="examplePasswordStatic" placeholder=" " required>
      <label for="examplePasswordStatic" class="nj-form-item__label">Password</label>
      <button type="button" aria-pressed="false" class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg nj-icon-btn--tertiary">
        <span class="nj-sr-only" data-password-button-label-show="Show password" data-password-button-label-hide="Hide password"></span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">visibility</span>
      </button>
      <p class="nj-sr-only nj-form-item__password-notice" aria-live="polite" aria-atomic="true" data-password-notice-is-visible="Password is visible" data-password-notice-is-hidden="Password is hidden"></p>
    </div>
    <div class="nj-form-item__subscript">Must be x character long</div>
  </div>
  <div class="nj-form-item nj-form-item--static nj-form-item--textarea">
    <div class="nj-form-item__field-wrapper">
      <textarea class="nj-form-item__field" id="exampleTextAreaFloatStatic" placeholder="Comment"></textarea>
      <label for="exampleTextAreaFloatStatic" class="nj-form-item__label">Comment</label>
    </div>
  </div>
</form>

Required, readonly and disabled inputs

You can add the required html attribute to specifies that an input field must be filled out before submitting the form.

Simply add the readonly html attribute to the corresponding input. You can specify the value witht the value html attribute.

To disable an input, use the disabled html attribute on the input element coupled with the .nj-form-item--disabled class on the .nj-form-item wrapper.

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputRequired" placeholder="default" required>
      <label for="exampleInputRequired" class="nj-form-item__label">Required</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputReadOnly" placeholder="default" value="readonly value" readonly>
      <label for="exampleInputReadOnly" class="nj-form-item__label">Read only</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--disabled">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputDisabled" placeholder="default" value="disabled value" disabled>
      <label for="exampleInputDisabled" class="nj-form-item__label">Disabled</label>
    </div>
  </div>
</form>

Error

You can trigger the error style with the .nj-form-item--error class.

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item nj-form-item--error">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleFloatingFirstNameError" placeholder=" " aria-describedby="floating-firstname-error" aria-invalid="true" required>
      <label for="exampleFloatingFirstNameError" class="nj-form-item__label">Firstname<span class="nj-form-item__required-asterisk">*</span></label>
    </div>
    <p id="floating-firstname-error" class="nj-form-item__subscript">
      <span aria-hidden="true" class="nj-form-item__subscript-icon material-icons">warning</span>
      Error
    </p>
  </div>
</form>

Size modifier

Need larger or smaller inputs?

Use the .nj-form-item--sm, .nj-form-item--lg or .nj-form-item--xl classes for additional sizes.

<form style="display: flex; gap: 24px;">
  <div class="nj-form-item nj-form-item--sm">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleSmFloatingInputsm" placeholder="default">
      <label for="exampleSmFloatingInputsm" class="nj-form-item__label">Sm</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleFloatingInputmd" placeholder="default">
      <label for="exampleFloatingInputmd" class="nj-form-item__label">Default</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--lg">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleLgFloatingInputlg" placeholder="default">
      <label for="exampleLgFloatingInputlg" class="nj-form-item__label">Lg</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--xl">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleXlFloatingInputxl" placeholder="default">
      <label for="exampleXlFloatingInputxl" class="nj-form-item__label">Xl</label>
    </div>
  </div>
</form>

Subscript element

You can add an information line below the input with the .nj-form-item__subscript class.

The subscript text gives a context on the entry of a field. It could be an instruction, a confirmation or an error.

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputWithInfo" placeholder="default">
      <label for="exampleInputWithInfo" class="nj-form-item__label">Example with information</label>
    </div>
    <div class="nj-form-item__subscript">Information line</div>
  </div>
</form>

Icon element

Add the desired material icon with the .nj-form-item__icon class modifier like so:

<span aria-hidden="true" class="nj-form-item__icon material-icons">info_outline</span>.

Check the full list of material icons here.

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputFirstNameSm" placeholder="sm">
      <label for="exampleInputFirstNameSm" class="nj-form-item__label">Firstname sm</label>
      <span aria-hidden="true" class="nj-form-item__icon material-icons">info_outline</span>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputFirstNameSmCheck" placeholder="sm">
      <label for="exampleInputFirstNameSmCheck" class="nj-form-item__label">Firstname sm</label>
      <span aria-hidden="true" class="nj-form-item__icon material-icons">check</span>
    </div>
  </div>
</form>

Input number

<form>
  <div class="nj-form-item nj-form-item--input-number">
    <div class="nj-form-item__field-wrapper" role="group" aria-labelledby="input-number-default">
      <button class="nj-icon-btn nj-icon-btn--secondary nj-form-item__decrement-button" type="button">
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">remove</span>
        <span class="nj-sr-only">- Decrement</span>
      </button>
      <input
        type="number"
        inputmode="numeric"
        class="nj-form-item__field"
        id="input-number-default"
        value="0"
        min="-100"
        max="100"
      >
      <label for="input-number-default" class="nj-form-item__label">Amount</label>
      <button class="nj-icon-btn nj-icon-btn--secondary nj-form-item__increment-button" type="button">
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">add</span>
        <span class="nj-sr-only">+ Increment</span>
      </button>
      <div aria-live="polite" aria-atomic="true" class="nj-sr-only"></div>
    </div>
  </div>
</form>

Password

To enable custom password widget mechanism with the visibility toggle button, add the .nj-form-item--password class and the visibility icon button with corresponding .nj-sr-only description

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item nj-form-item--password">
    <div class="nj-form-item__field-wrapper">
      <input type="password" class="nj-form-item__field" id="examplePassword" placeholder=" " required>
      <label for="examplePassword" class="nj-form-item__label">Password</label>
      <button type="button" aria-pressed="false"
              class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg nj-icon-btn--tertiary">
        <span class="nj-sr-only" data-password-button-label-show="Show password"
              data-password-button-label-hide="Hide password"></span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">visibility</span>
      </button>
      <p class="nj-sr-only nj-form-item__password-notice" aria-live="polite" aria-atomic="true"
         data-password-notice-is-visible="Password is visible"
         data-password-notice-is-hidden="Password is hidden"></p>
    </div>
    <div class="nj-form-item__subscript">Must be x character long</div>
  </div>
</form>

Search

<div class="nj-search">
  <div class="nj-search__field-wrapper">
    <span class="nj-search__icon material-icons nj-icon-material"
          title="searchIcon"
          aria-label="searchIcon"
          aria-hidden="true">
      search
    </span>
    <input placeholder="Search"
            class="nj-search__field"
            type="search"
            id="searchId"
            value="">
    <label for="searchId"
            aria-hidden="true"
            class="nj-sr-only">
        Search
    </label>
    <button class="nj-icon-btn nj-search__clear-button"
            type="button">
      <span class="nj-sr-only">clear</span>
      <span class="material-icons nj-icon-material nj-icon-material--size-inherit nj-icon-btn__icon"
            aria-hidden="true">
        cancel
      </span>
    </button>
  </div>
</div>

<hr />

<div class="nj-search">
  <div class="nj-search__field-wrapper">
    <span class="nj-search__icon material-icons nj-icon-material"
          title="searchIcon"
          aria-label="searchIcon"
          aria-hidden="true">
      search
    </span>
    <input placeholder="Search"
            class="nj-search__field"
            type="search"
            id="searchId"
            value="">
    <label for="searchId"
            aria-hidden="true"
            class="nj-sr-only">
        Search
    </label>
    <button class="nj-icon-btn nj-search__clear-button"
            type="button">
      <span class="nj-sr-only">clear</span>
      <span class="material-icons nj-icon-material nj-icon-material--size-inherit nj-icon-btn__icon"
            aria-hidden="true">
        cancel
      </span>
    </button>
  </div>
  <button type="button" class="nj-btn nj-search__button">Search</button>
</div>

Textarea

Add the .nj-form-item--textarea modifier and use the html textarea tag instead of input.

<form style="display: flex; flex-direction: column; gap: 24px;">
  <div class="nj-form-item nj-form-item--textarea">
    <div class="nj-form-item__field-wrapper">
      <textarea class="nj-form-item__field" id="exampleTextArea" placeholder="Comment"></textarea>
     <label for="exampleTextArea" class="nj-form-item__label">Comment</label>
    </div>
  </div>
</form>

Column sizing example

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 class="row">
  <div class="col-md-7">
    <div class="nj-form-item">
      <div class="nj-form-item__field-wrapper">
        <input type="text" class="nj-form-item__field" id="exampleColumnSizing1" placeholder="default">
        <label for="exampleColumnSizing1" class="nj-form-item__label">City</label>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="nj-form-item">
      <div class="nj-form-item__field-wrapper">
        <input type="text" class="nj-form-item__field" id="exampleColumnSizing2" placeholder="default">
        <label for="exampleColumnSizing2" class="nj-form-item__label">State</label>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="nj-form-item">
      <div class="nj-form-item__field-wrapper">
        <input type="text" class="nj-form-item__field" id="exampleColumnSizing3" placeholder="default">
        <label for="exampleColumnSizing3" class="nj-form-item__label">Zip</label>
      </div>
    </div>
  </div>
</form>

Inline-message

Layout