Use the Large Value Reference component to display important reference numbers.
It enables quick copying of critical information with a single click or tap.
The component can display grouped characters or ungrouped strings.
The component has 2 themes and an optional copy icon.
1. Surface bright theme with no spaces
2. Surface theme with grouped characters
Usage
Use grouped characters when:
- The reference number is long and benefits from chunking for readability.
- The value has a standardised structure (e.g. MPANs or long numeric identifiers).
- Users are likely to read the value aloud or visually verify sections of it.
Grouping improves scanability and reduces cognitive load by breaking the value into segments.
Use an ungrouped string when the value does not have a meaningful internal structure.
Avoid artificially grouping values where spacing could cause confusion or mismatch with backend systems.
Don’t use the Large Value Reference component for short labels or values that can be inline text (use typography styles instead).
Don’t use the Large Value Reference component for values that are editable. This is a read-only display pattern. Use an editable list instead.
When the user taps to copy the large value reference number, display a timed toast to clarify that the number has been copied to the clipboard.
Writing a Large Value Reference
The label provides context for the reference value. It should clearly describe what the number represents so users can confidently use or share it.
Keep it clear and specific
- Use precise terminology. e.g. “MPAN”, “Account number”, “Meter serial number”
-
Avoid vague labels such as “Reference” or “Number”
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v5+ |