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.

Input + Button

A variation of a standard Input with an additional interactivity with the associated button.

Key Points

The Button only validates the data entered in the associated input

The Label can be resized from MD to 8XL

The Helper Text and Optional Text can be shown or hidden

By default, the Button is styled as a Secondary

There are two Validation States: Error and Success

Usage

Do not change the Button to any other variant. Do Not use other interactive events to invoke the validation (e.g. ‘mouse up’, ‘key up’, ‘keypress’, etc).

Use the Input + Button when the entered data needs to be validated separately from the rest of the form. The data can only be validated when the Button is interacted with (e.g. ‘Clicked’).

An example of Input + Button

Helper and Optional Text can be shown or hidden

Spacing Values

Spacing between items for Input + Button

Validation States

Error State

An example of an 'error' state

An error validation message appears when the data entered is invalid.

Success State

An example of a 'success' state

A success validation message appears when the data entered is valid.

Accessibility

For users utilising a screen reader, the validation should be announced immediately when the Button is interacted with. Use ARIA Live Regions to announce the validation message.

An example of using aria-live attribute


                                                        
                                                        
                                                            <span aria-live="polite">Valid plan number</span>