The Variant selector is component designed to allow a customer to configure their product selection from a set of variants. For example, pack size, scent, etc.
Usage
Do
Don’t
Use in any component other than Product header
This list may expand in the future
Anatomy
Item | Type / component | Notes |
|---|---|---|
1 | Typography | |
2 | Link | |
3 | Retailer link |
Key Content
Item | Type | Notes |
|
|
*Notes
Behaviour
Progressive enhancement:
Non JS
JS
Editorial
Label may be pulled from a dictionary
Accessibility
Key | Interaction |
|---|---|
Aria considerations
Analytics & Data
Add from Product header
Related/Similar Components
Future Expansion
Dropdowns
buttons etc
Wider Conversations that may impact this
Retailer links: Is this a variant of links or a separate component
Inspiration from elsewhere
X
X
Examples
Insert here