City of Ghent Style Guide

Input

When to use this component

Use the input component to let users enter text or a value that is not longer than a single line.

When not to use this component

Do not use the input component to let users enter longer text that might have multiple lines. In this case, use textarea component instead.

How it works

Types of input

  • Default (simple text or text value that is not longer than a single line, no format)
  • Date (date format)
  • Time
  • Number (number format)
  • Password (password, characters are masked)
  • Email (automatically validated)
  • Telephone number

Date input

To let users enter a date, use the input type date. This will trigger the built-in browser date picker functionality for a consistent user experience. It is also the best way to let the user enter a date on mobile and it is accessible (most custom date pickers aren’t).

For browsers that do not support the input type date, make sure there is a fallback, for instance, by adding a field message explaining the date format that should be used combined with pattern validation.

Usage, behaviour, layout and validation

The input component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.

{% set describedBy = null %}
{% if field_description %}
  {% set describedBy = id ~ "-description" %}
{% endif %}
{% if field_message %}
  {% set describedBy = id ~ "-message" %}
{% endif %}
<div class="form-item {{ modifier ? ' ' ~ modifier : '' }}{{ stacked ? ' stacked' : '' }}">
  {% include '@form-label' with {
    "label": label,
    "for": id,
    "label_optional": label_optional
  } %}
  {% include '@field-message' with {
    "field_message": field_description,
    "modifier": null,
    "id": id ~ "-description"
  } %}

  <div class="form-columns">
    <div class="form-item-column">
      {% include '@'~input_component with {
        "id": id,
        "name": name|default(id),
        "ariaDescribedBy": describedBy,
        "type": type,
        "invalid": modifier == 'error',
        "modifier": modifier
      }%}
    </div>
    <div class="form-item-column">
      {% if field_message %}
        {% include '@field-message' with {
          "modifier": modifier,
          "id": id ~ "-message"
        } %}
      {% endif %}
    </div>
  </div>
</div>
<div class="form-item ">
    <label for="input-file">input--file
        <span class="label-optional">
            Optional
        </span>
    </label>

    <div class="form-columns">
        <div class="form-item-column">
            <div class="file" data-file="No file chosen">

                <input type="file" id="input-file" aria-describedby="input-file-description" name="input-file" />

                <span id="input-file-description" class="file__button">Select your files here to upload</span>
            </div>

        </div>
        <div class="form-item-column">
        </div>
    </div>
</div>
{
  "label": "input--file",
  "id": "input-file",
  "label_optional": "Optional",
  "field_description": null,
  "field_message": null,
  "input_component": "file",
  "type": "text"
}
  • Content:
    .form-item {
      margin-bottom: 30px;
    
      > * {
        max-width: 410px;
      }
    
      @include desktop {
        > * {
          max-width: 820px;
        }
    
        > .field-message,
        > label {
          max-width: 410px;
        }
      }
    
      &.webform-document-file,
      &.webform-image-file {
        a,
        .file-type {
          display: inline-block;
          margin-bottom: 10px;
          font-size: .7rem;
        }
      }
    
      .field-prefix,
      .field-suffix {
        display: block;
      }
    
      .field-message:not(.error):not(.success) {
        margin-bottom: 20px;
      }
    
      &:not(.stacked) {
        .form-label {
          @include desktop {
            width: 50%;
            max-width: 410px;
          }
        }
    
        .form-columns {
          margin-bottom: 0;
    
          @include desktop {
            display: flex;
    
            .form-item-column {
              width: 50%;
    
              &:last-child {
                display: flex;
                align-items: flex-start;
    
                .field-message {
                  margin: 0 0 $gutter-width * .5 6px;
                  padding: 14px 24px 14px 78px;
    
                  &::before {
                    top: 10px;
                    left: 34px;
                  }
    
                  .accolade {
                    right: auto;
                    bottom: 0;
                    left: 0;
                    width: 20px;
                    height: 100%;
                    transform: rotate(0deg);
    
                    &::before,
                    &::after {
                      width: 20px;
                      border: 0;
                    }
    
                    &::before {
                      top: 0;
                      bottom: 24px;
                      height: 24px;
                      border-radius: 0 0 border-radius("radius-4");
                    }
    
                    &::after {
                      top: 24px;
                      right: 0;
                      bottom: -1px;
                      height: calc(100% - 20px);
                      border-radius: 0 border-radius("radius-4") 0 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    
      &.stacked {
        > * {
          max-width: none;
        }
    
        .form-columns {
          flex-wrap: wrap;
          margin-top: auto;
        }
    
        .form-columns .form-item-column {
          width: 100%;
          max-width: 800px;
    
          .field-message {
            width: 100%;
            margin-top: 4px;
            margin-left: 0;
          }
        }
      }
    }
    
    .form-item-column {
      .form-item {
        .form-label {
          width: 100%;
        }
      }
    }
    
  • URL: /components/raw/form-item/_form-item.scss
  • Filesystem Path: components/31-molecules/form-item/_form-item.scss
  • Size: 2.4 KB