Input

Text fields let users enter and edit text.

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

visibility
Must be x character long
<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="exampleInputLastName" placeholder="default">
      <label for="exampleInputLastName" 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="examplePassword" placeholder="password">
      <label for="examplePassword" class="nj-form-item__label">Password</label>
      <i class="nj-form-item__icon material-icons" tabindex="0">visibility</i>
    </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

visibility
Must be x character long
<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="exampleInputFirstName" placeholder="default">
      <label for="exampleInputFirstName" 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="exampleInputEmail" placeholder="default" required>
      <label for="exampleInputEmail" 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="examplePassword" placeholder="password">
      <label for="examplePassword" class="nj-form-item__label">Password</label>
      <i class="nj-form-item__icon material-icons" tabindex="0">visibility</i>
    </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.

Error subscript
<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="exampleInputError" placeholder="default">
      <label for="exampleInputError" class="nj-form-item__label">Firstname</label>
    </div>
  </div>
  <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="exampleInputErrorWithSubscript" placeholder="default">
      <label for="exampleInputErrorWithSubscript" class="nj-form-item__label">Firstname</label>
    </div>
    <div class="nj-form-item__subscript">Error subscript</div>
  </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.

Information line
<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:

  • <i class="nj-form-item__icon material-icons">info_outline</i>.

Check the full list of material icons here.

info_outline
check
<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>
      <i class="nj-form-item__icon material-icons">info_outline</i>
    </div>
  </div>
  <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>
      <i class="nj-form-item__icon material-icons">check</i>
    </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 <i class="nj-form-item__icon material-icons">visibility</i>.

Adding a tabindex="0" on the icon allows keyboard focus on the icon.

visibility
<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="password">
      <label for="examplePassword" class="nj-form-item__label">Password</label>
      <i class="nj-form-item__icon material-icons" tabindex="0">visibility</i>
    </div>
  </div>
</form>

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>