IxDF Design System

“Form” Component

Design: zeplin.

Form elements are ubiquitous and used throughout the site, from member profiles to discussion threads and course quizzes. Good, consistent form design based on accessibility and usability principles help ensure pleasant form-filling experiences.

Less is More

For forms, less is better. Reduce or eliminate unneeded forms, because more form fields will reduce the completion rate.

  • Remove as many optional fields as possible.
  • Mark all optional fields by adding “(optional)” at the end of the field label. This also makes it clear to the designer when a form has too many optional fields.
  • Always explain why we ask for sensitive information, such as a person’s phone number or address.

Facilitate Data Input

In most cases, data input is a chore. Help users by making it a faster and easier process.

  • Show hint text within a field for potentially confusing or complex fields.
  • Don’t show hint text for simple fields—e.g. name—because it may come across as condescending.
  • Use geo-location or postcode lookup services to help fill in addresses.
  • Whenever possible, don’t split a field up. For instance, ask for “Full name” rather than “First name” and “Last name”.
  • Include the proper input type markup so that the right mobile keyboard is shown.
  • Don’t show a “Clear field” or “Cancel” button on a form because it will reset all fields. The user can close the window or go to the previous page if they want to abandon the form.
  • On password fields, allow users to toggle the visibility of the password they enter.

Errors

  • Whenever possible, use frontend form validation. This allows timely error messages to be shown as the user is filling a form up, rather than after the form is submitted.
  • Trigger frontend validation only 700ms after a user has stopped typing, or after the user moves to another field. This
  • prevents overzealous error messages from appearing as the user is typing.
  • Use backend form validation as a last resort, when frontend validation is not possible or feasible.
  • Show error messages at the field with the error.
  • Error messages should sound human. They should be clear and jargon-free.
  • Never blame the user for an error.

General Input

Secure form
Help text
Please enter field

Password Input

Please enter field
At least 8 characters

Usage

<x-text-field
    id="some-input"
    name="some-input"
    label="Field label"
    helpText="Help text"
    defaultErrorText="Please enter field"
    required
    placeholder="Hint text" />

@component('components.forms.passwordField', [
    'name' => 'password',
    'label' => 'Field label',
    'helpText' => 'At least 8 characters',
    'defaultErrorText' => 'Please enter field',
    'required' => true,
])@endcomponent

Props

  • label
    string

    Sets label for input.

  • helpText
    string

    Adds help text for input.

  • errors
    array<string>

    Turns on error state.

  • defaultErrorText
    string

    Default error to show if no specific error passed.

Checkbox Input

Error text

Usage

<div>
    <input type="checkbox" id="check_1" name="check_1" value="on" checked />
    <label for="check_1">Check Option</label>
</div>

<div class="error">
    <input type="checkbox" id="check_2" name="check_2" value="on" />
    <label for="check_2">Check Option</label>
    <span class="error">Error text</span>
</div>

Radio

Error text

Usage

<div>
    <input type="radio" value="3" id="radio_1" name="age" checked>
    <label for="radio_1">Default radio</label>
</div>

<div class="error">
    <input type="radio" value="5" id="radio_2" name="age">
    <label for="radio_2">Invalid radio</label>
    <span class="error">Error text</span>
</div>

Select

Help text
Please check the value and try again.
Help text
Please enter field
Help text
Please enter field

Usage

<x-select
    label="Select" helpText="Help text" name="learning_path"
    defaultErrorText="Please enter field" class="error">
    <option hidden>Get a learning path…</option>
    <option value="ux_designer">UX Designer</option>
    <option value="front_end_developer">Front-End Developer</option>
</x-select>

// Large select
<x-select
    label="Select" helpText="Help text" name="learning_path"
    defaultErrorText="Please enter field" class="select--large">
    <option hidden>Get a learning path…</option>
    <option value="ux_designer">UX Designer</option>
    <option value="front_end_developer">Front-End Developer</option>
</x-select>

Group button

Usage

<div class="inputGroup">
    <input type="text" id="name" name="name" required placeholder="Member’s name">
    <div class="inputGroup__addon inputGroup__addon--noBorder">
        <button type="button" class="button button--primary">
            <x-svg-icon name="chevron-right-bold" size="medium" />
        </button>
    </div>
</div>