Link to Fluid's Microsoft Teams channel Link to the support page

Form

Forms are used to send and collect data.

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.

You can easily build forms using the following components:

Example

Create account

Must be at least 14 characters long
<form style="display: flex; flex-direction: column; gap: 24px;">
  <h3>Create account</h3>
  <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="examplePassword1" placeholder=" " required>
      <label for="examplePassword1" 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--secondary">
        <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 at least 14 characters long</div>
  </div>
  <div class="nj-checkbox">
    <label>
      <input type="checkbox"> I acknowledge ...
    </label>
  </div>
  <button class="nj-btn nj-btn--block" type="submit">Create account</button>
</form>

Contact form

<form style="display: flex; flex-direction: column; gap: 24px;">
  <h3>Contact form</h3>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="contactFormInputEmail" placeholder="default" required>
      <label for="contactFormInputEmail" class="nj-form-item__label">Email</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="contactFormInputFirstName" placeholder="default">
      <label for="contactFormInputFirstName" 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="contactFormInputLastName" placeholder="default">
      <label for="contactFormInputLastName" class="nj-form-item__label">Lastname</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
    <div class="nj-form-item__field-wrapper">
      <p hidden id="custom-select-instructions-1">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
      <input class="nj-form-item__field" id="exampleSelectCustom" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
      <label for="exampleSelectCustom" class="nj-form-item__label" aria-hidden="true">How did you hear about us?</label>
      <span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>

      <button
        class="nj-form-item__custom-list-button"
        type="button"
        aria-label="Example - Select a value"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-describedby="custom-select-instructions-1"
        role="combobox"
      ></button>

      <ul
        role="listbox"
        hidden
        aria-label="Example"
        class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm"
        tabindex="-1"
      >
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" value="test">Option 1</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 2</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 3</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 4</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 5</li>
      </ul>
    </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="contactFormTextAreaFloat" placeholder="Comment"></textarea>
      <label for="contactFormTextAreaFloat" class="nj-form-item__label">Comment</label>
    </div>
  </div>
  <div class="d-flex">
    <button class="nj-btn" type="submit">Reach out</button>
  </div>
</form>

Footer

Grid