#Overview
Selectors are an alternative way to showcase a Radio Button, Checkbox, Button or Link.
Selectors can represent a wide variety of content and it is up to the individual teams how that content inside the selectors is represented.
#When to use
- For complex selections, such as the product variants on the Product Detail Page (PDP). The function of these selectors is the same as a simple link, but it is of great importance that users can already see a preview image.
#Don’t use for
- Simple selections or actions (use a Radio Button, Checkbox, Button or Link instead)
#Placement
#Selector link
Selector links lead to a new page. For example, the color and storage capacity variants lead to a new Product Detail Page (PDP).
#Selector button
Selector buttons allow users to perform an action on the same page. For example, in an image gallery, a user clicks on a thumbnail to change the main image.
#Selector radio button
Selector radio buttons allow users to make one selection from a set of mutually exclusive options. For example, when reselling a product, a user needs to select the product’s condition.
#Selector checkbox
Selector checkboxes allow users to make multiple selections. For example, in the checkout, a user can specify all possible time windows for a delivery.
#States
#Galaxus
#Digitec
- Normal
- Hover
- Focus-visible
- Active
- Disabled
- Error