An Accordion is an item that can contain "children" items. When closed the children items are hidden. Accordion has an icon to the right denoting whether the Accordion is closed or opened When open the children are visible. An accordion must have a minimum of 2 items. 

Behaviours & States


An Accordion in the closed state is designated by an up arrow to the right of the header. When an Accordion is open, the arrow is pointed downward.

A user may toggle the Accordion open/closed by selecting the header text when in the focus state. Closed is the defaut state of the Accordions.

List items within an Accordion can be selectable. Since multiselection is possible, the Accordion should not automatically close after an item has been selected.


When placed in a group Accordions are mutually exclusive and only one Accordion in the group can be open at a time. 


An Accordion can either be open or closed. They can be opened by selecting when in the focus state.


The height of an Accordion is dependent on the number of items within. The width of the Accordion is determined by its parent container. The width may also be fixed causing longer text to truncate with an elipsis. When in focus, the text will marquee.