Inputs & Textarea
Pull to Refresh
React Grid Layout
Accordions enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user.
Accordions can be used to group and hide content to keep an interface clean and reduce clutter. Accordions can be used to display only one or multiple panels at a time, depending on the use case.
Accordions can be subtle or bold depending on how prominently they should be displayed.
Accordions have four styled states available — enabled, hover, focus and disabled.
An expanded accordion item reveals an accordion panel with additional content. The panel is expanded and collapsed with a slide animation.
A leading icon can be added before the title in an accordion item.
Note: A leading icon can be achieved through custom overrides in UI Toolkit and we are working towards releasing this property in a future version of UI Toolkit.
Accordions can be displayed in large, medium and small sizes.
Accordion panels can have a variety of content types added into them. Some custom layout examples are shown below.
Summary accordions shows basic information in its collapsed state and more details when expanded.