Forms and inputs overview

To date DrDoctor has not needed much in the way of form inputs.

Some places that do require form inputs include the login page, quick question, and assessments. Assessments is currently handled by FormStack but eventually will be replaced by an in-house forms solution that may have its own design sub-system.

Key points

Best practice form HTML5 should be used, which includes accessibility considerations (keyboard and assistive technologies), validation (and not relying on client side forms without server side re-validation), security, etc.

Legacy CSS for forms style global HTML elements directly such as textarea and various input types. We should move away from this to avoid clashes with any third party components and libraries we incorporate.

Newer code make us of the drdr-form class which would typically go on a form element.

Each form element or control such as input, textarea, select, or custom form component would have a class drdr-form-control.

Examples

A form with an input field and help text:

            
<form action="" class="drdr-form">
  <div class="drdr-form-control">
    <label for="example-input-1">Example label</label>
    <input type="text" id="example-input-1" class="-block" />
  </div>
  <button type="submit" class="button -primary">Submit</button>
</form>

This will produce the following:

A form with an input field and help text:

            
<form action="" class="drdr-form">
  <div class="drdr-form-control">
    <label for="example-input-2">Example label</label>
    <p class="drdr-form-help-text" id="example-help-2">Example help text here</p> 
    <input type="text" id="example-input-2" aria-describedby="example-help-2" />
    <button type="submit" class="button -primary">Submit</button>
  </div>
</form>

This will produce the following:

Example help text here

Notes about the examples:

  • Use the -block utility class to make the field full width
  • For additional help text, use an id on the help text and aria-describedby pointing to that id on the input, as per the second example above.

Where used outside of cards:

Checkboxes

Use the drdr-checkbox class to create custom styled checkboxes:

            
<div class="drdr-checkbox">
  <input type="checkbox" id="checkbox-1" />
  <label for="checkbox-1">I agree to the terms and conditions</label>
</div>

<div class="drdr-checkbox">
  <input type="checkbox" id="checkbox-2" checked />
  <label for="checkbox-2">Subscribe to newsletter</label>
</div>

<div class="drdr-checkbox -primary">
  <input type="checkbox" id="checkbox-3" checked />
  <label for="checkbox-3">Primary variant checkbox</label>
</div>

This will produce the following:

Notes about checkboxes:

  • The checkbox uses custom styling with a checkmark SVG icon when checked
  • Focus states include a blue outline for accessibility
  • Always associate the checkbox with a label using the for attribute
  • The checkbox container uses flexbox with an 8px gap between checkbox and label

Radio buttons

Use the drdr-radio class for custom styled radio buttons. Give every input in a group the same name so only one can be selected. Add the -primary modifier for the blue selected state (used on patient-facing forms such as the cancellation reasons).

            
<div class="drdr-radio -primary">
  <input type="radio" name="reason" id="reason-1" />
  <label for="reason-1">I am on holiday</label>
</div>

<div class="drdr-radio -primary">
  <input type="radio" name="reason" id="reason-2" checked />
  <label for="reason-2">I no longer require my appointment or treatment</label>
</div>

This will produce the following:

Notes about radio buttons:

  • The radio uses custom styling with a filled inner dot when selected
  • All inputs in a group must share the same name attribute
  • The -primary modifier turns the ring and dot to the trust primary colour; without it the selected state uses the default ink colour
  • Focus states include a blue outline for accessibility
  • Always associate each radio with a label using the for attribute

Validation and errors

Validation can be quite complex, involving a mixture of HTML5, JavaScript and server-rendered HTML.

drdr-form-control-error class to indicate an error

Use the drdr-form-control-error class alongside the drdr-form-control class to indicate a field in an error state.

This may be generated by the server side if using server-side rendering, or by JavaScript if using a client side application.

For accessibility ensure appropriate error messages are marked up to be associated with the input field as well.

Example:

            
<form action="" class="drdr-form">
  <p class="drdr-form-control-error-message">A summary message outside the form control</p>

  <div class="drdr-form-control drdr-form-control-error">
    <label for="example-input-4">Example label</label>
    <input type="text" id="example-input-4" />
  </div>

  <button type="submit" class="button -primary">Submit</button>
</form>

A summary message outside the form control

HTML5 in-built validation

In-built HTML5 validation will trigger similar visual styling. Error messages outside the form control (e.g. an error or validation summary) can use drdr-form-control-error-message class: 

            
<form action="" class="drdr-form">
  <div class="drdr-form-control">
    <label for="example-input-5">Example label</label>
    <input type="number" id="example-input-5" value="15" min="0" max="10" />
  </div>
  <button type="submit" class="button -primary">Submit</button>
</form>

Submitting this field without it being valid will trigger built-in HTML5 validation and prevent submission.

Detailed example

This example uses a variety of form elements, including the recommended pattern for date of birth input using a specialised dob-input-* classes.

Date of birth (for example, 15 3 1984)

Inspect or view source for details.