Help On Forms

Help On Forms

There are a number of ways to provide additional help to users as they enter data into fields: field level help and syntax hints.

Field Level Help

Field level help, denoted by the information icon, can be used to provide supplemental information. The help text is displayed in a popover when the user clicks on the information icon. Popovers are triggered on click, are mobile-friendly, and are ideal when links need to be listed in the help. While popovers are recommended, you can use tooltips if it is preferred to have the information appear on hover. Tooltips are best suited for desktop browsing, though they’re supported on mobile devices as well.

While not limited to, the most common use case for field level help is seen on forms.

Recommendations for usage:

  • Use wherever any field needs additional explanation
  • The description length should be as concise as possible

This pattern should NOT be used when:

  • Compensating for bad design and relying on it to explain a graphic or word choice.
  • The information displayed by the popover is necessary to read.

Field level help

Syntax Hints

Syntax hints help users successfully complete forms by displaying an example of the required or recommended format for the input data. Syntax hints are useful when users are asked to provide unfamiliar data and there is a specific format the data should follow.

Recommendations for usage:

  • Only use for open text input fields
  • Limit use to avoid overwhelming the user
  • The hint length should be as concise as possible and not extend the length of the text field

This pattern should NOT be used:

  • When syntax requirements are complex and the explanation is lengthy - for example, when outlining password requirements.
  • When the information is not necessary for the user to read to complete their task. In this case, use Field Level Help.
  • As a replacement for form field labels. For more information, see Field Labeling.

Default state

Syntax help without errors

Page with errors

Syntax with errors

Help On Forms

Field Level Help

Field level help with expanded text

  1. Icon: The help icon is a PatternFly icon (pficon-info) and is positioned to the right of the component. The icon is grey and changes on hover over to blue (pf-blue) to indicate that it is interactive.
  2. Text: We recommend that the popover text does not exceed three sentences. If needed, include a link to online resources. The popover supports HTML formatting.
  3. Popover: On click of the icon, the popover appears. The popover should be dismissed after the user has clicked outside of it.

Syntax Hints

Syntax level help box

  1. Syntax Hint: The hint is located beneath the text field and will remain visible even if the input field box are in different states (with the exception of the error state).
  2. Error State: When the user provides data that is not valid, the hint will turn red to indicate they must input the data in the correct format. Optional: Include an error message detailing what went wrong in addition to showing the syntax hint in red.

What’s not covered in the current design:

  • Alternative design solutions that work with assistive technology or older web browsers that do not support placeholder syntax hints.

PatternFly Core Example


Example

Reference Markup

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="help-2">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" class="popover-pf-info" title="popover-pf-info" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="pficon pficon-info"></span></a></label>
    <div class="col-sm-9">
      <input type="text" id="help-2" class="form-control">
    </div>
  </div>
</form>
<script>
  // Initialize Popovers
  $(document).ready(function() {
    $('[data-toggle=popover]').popovers()
      .on('hidden.bs.popover', function (e) {
        $(e.target).data('bs.popover').inState.click = false;
      });
  });
</script>