#Overview

A collapsible option helps the user understand options available to them that contain additional detail without overwhelming the user.

#When to use

• When a process requires multiple steps which contain multiple options with additional detail

#Don’t use for

• Options in a standard form with no additional detail (use a Radio Button).
• Collapsible options are never used a single option.

#Anatomy

1. Container
2. Selected state highlight
3. Radio button
4. Label
5. Detailed description (optional)
6. Additional information (optional)
7. Select state expansion

#Color

1. Galaxus
2. Digitec

#Spacing

Mobile

Desktop

#Placement

The Checkout page involves several steps with multiple collapsible options.

#States

#Default state

#Selected state

#Disabled state