Form Dialog

Form dialog consists of small pieces of UI that guides the user in filling out forms. Microcopy like labels, hints, error messages, as well as indicatos for required or optional fields are all examples of form dialog.

Disclaimer: The design system does not provide or recommend any Javascript framework for handling client-side validation. The following documentation is meant to provide a visual and explanatory guide on how form dialog, error messages included, should appear in forms. Not how they should work in a framework context.

Optional

If a field is optional, we can choose to show this by adding an optional text inside the label.

<!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large" id="--87240" type="text" placeholder="Placeholder" />
    <label class="kx-label" for="--87240">
        Username<span class="kx-form__optional">(optional)</span>
    </label>
</div>

Required

If the required-attribute is applied to the <input class="kx-field" required="required" />, we automatically add a small asterisk (*) at the end of the form label.

If the field is empty, not containing a value, the border becomes red on :focus. This is because an empty value is considered :invalid when required-attribute is set. The border goes back to normal when the user start typing. It’s no longer is empty, hence it’s :valid according to the required-attribute.

Note: Using the placeholder-attribute provides a visual text, but is not considered as a value.

<!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large" id="--78799" type="text" placeholder="Placeholder" required="required" />
    <label class="kx-label" for="--78799">
        Username
    </label>
</div>

We also provide a way to have the field set to required but not visually showing it as such. By adding the class kx-hide-required we do not show the asterisk (*).

<!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--33378" type="text" placeholder="Placeholder" required="required" />
    <label class="kx-label" for="--33378">
        Username
    </label>
</div>

Optional vs required. What to use?

A common recommendation is to use optional instead of required:

  1. Clearer communication Not everyone knows what the red asterisk means. “Optional” is written in the language of the form. The asterisk is requiring the brain to do additional processing.
  2. Most friendly Using language like “Optional” is letting users know they have a choice, which is in line with the Norman Nielsen Group usability principle of user control and freedom.
  3. Less visual clutter The asterisk is a design element that is cluttering up a form. It’s taking away from the goal of filling out the form. Chances are the majority of your form fields will be required so only needing to mark the optional makes it clearer.
  4. More logical It’s expected that fields are required. If someone is filling out the form it’s because they expect something afterwards. Fields on original paper forms were all considered to be required. There is a purpose to filling out the form or people would never do it. Don’t waste their time. Only ask what is necessary.

Here are two examples of the same form. We ask for email, first name, last name and telephone number. Only telephone number is optional, the rest are required.

  • Show whats optional. This leaves less clutter in the form.

  • Show all fields that are required. This clutters the form.

Hints and error messages

Guide the user with additional information by adding hints. They appear as small help texts below the field. If there is an error, the same hint element is used, but with a modifier kx-form__hint--error.

Avoid using both hint and error at the same time. If an error occurs, let the error message replace the help text, providing sufficient information on how to solve the problem.

When the error is corrected, revert back to the original help text.

Input field with hint

Hints can help the user completing the form 
<!-- FIELD Component -->
<div class="kx-form__element">
    <span class="kx-form__hint">
        <span class="kx-form__hint__txt">Hints can help the user completing the form</span>
    </span>
    <input class="kx-field kx-field--size-large" id="--76491" type="text" placeholder="Placeholder" />
    <label class="kx-label" for="--76491">
        Username
    </label>
</div>

Input field with error

Username too short 
<!-- FIELD Component -->
<div class="kx-form__element">
    <span class="kx-form__hint kx-form__hint--error">
    <i class="kx-icon kx-icon--size-small kx-spinner">
        <svg class="kx-spinner__icon" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6"></circle>
        </svg>
    </i>

            <span class="kx-form__hint__txt">Username too short</span>
    </span>
    <input class="kx-field kx-field--size-large kx-is-invalid" id="--59066" type="text" placeholder="Placeholder" />
    <label class="kx-label" for="--59066">
        Username
    </label>
</div>

Select with hint

Select with error


Textarea with hint



    
        Hints can help the user completing the form
    
    
    




<div class="kx-form__element">
    <span class="kx-form__hint">
        <span class="kx-form__hint__txt">Hints can help the user completing the form</span>
    </span>
    <textarea class="kx-field kx-field--size-large" name="" id="--60367" rows="5" placeholder="Large"></textarea>
    <label class="kx-label" for="--60367">
        Textarea Label
    </label>
</div>
Textarea with error



    
        You have exceeded the character limit
    
    
    




<div class="kx-form__element">
    <span class="kx-form__hint kx-form__hint--error">
        <span class="kx-form__hint__txt">You have exceeded the character limit</span>
    </span>
    <textarea class="kx-field kx-field--size-large kx-is-invalid" name="" id="--37712" rows="5" placeholder="Large"></textarea>
    <label class="kx-label" for="--37712">
        Textarea Label
    </label>
</div>