Forms

Forms are critical in our design system to allow users to input data, from calculators to our contact forms. Each from element in our component library is individually documented, however, this page provides the overarching guidelines when working with forms.

Sliders

Sliders are an input type that allows the user to change a value across a range using a graphical slider. Our sliders are always composed with an input field inline, this both displays and controls the slider position.

Key Points

Sliders should always be displayed with an input field

Sliders can be set to move in stepped increments

Sliders’ Label, Helper Text or Optional Text can be hidden or shown

Usage

Sliders are placed in a form like other inputs. Helper text is optional but should be used to provide any supporting information e.g. “This slider moves in increments of £100”.

Slider Composition

An example of all elements displayed for the Slider component

Slider Variants

Slider (Input Start)

The Input component at the beginning of the slider

Slider (Input End)

The Input component at the end of the slider

Validation

Show a validation message when the data entered by the User exceeds the maximum value set in the max attribute.

Slider Validation

An illustration of a validation message for the Slider component. In this example, the `max` attribute value is set to "100".

Behaviour

Aside from the users being able to select or tab into this input they must be able to control the slider with a mouse or keyboard. The input field and slider components are linked so that the input field will adjust the slider position and visa versa.

Interactive area

Sliders' interactive area

The 'blue dotted lines' illustrates the slider's interactive area.

Accessibility

Key Points

The Label should be announced when the input field or slider’s handle receives a focus state

The input field’s type is a number , i.e. type=”number”

Keyboard users can press ➡️ or ⬆️ keys to increment the value of the input field or move the slider’s handle to the right side

Keyboard users can press ⬅️ or ⬇️ keys to decrement the value of the input field or move the slider’s handle to the left side

Use the tab key ⇥ (or shift + tab, ⇧ + ⇥) to navigate between input field and slider’s handle

Focus Order

The focus order should go from 1️⃣ input field, and then the 2️⃣ slider's handle. These should be keyboard navigable.