Repeaters are user controlled patterns for repeating sets or single UI elements, usually inputs.
Repeater
Default
Use the default Repeater in situations where the user may need to repeat a single component or field, e.g. for multiple phone number entries.
With separator
Use the Repeater with separator when the user may need to repeat a set of components or fields, e.g. for multiple sets of credit card or account details.
Usage examples
User experience
The text “Add another item” is configurable but must be used with the “Add Circle” icon in order to be discoverable and appear as an affordance.
A remove button appears once another instance has been added.
The “Add another item” button must always be left aligned in order to maximise discoverability.
Dos and don'ts
- For accessibility reasons, the “Add Circle” icon must be used
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.