Accordion

Design System - Accordion component

The Accordion organises content into expandable and collapsible sections, making it ideal for dense information like FAQs or instructions. They are suitable for organising step-by-step instructions or processes.

Component React

// Sample code

<Accordion
  icon="Accessibility"
  number={1}
  onToggle={()=>{}}
  title="Section Header"
>
  <Accordion
    isChild={true}
    title="Nested Accordion"
  >
    This is a nested accordion demonstrating component composition. The isChild prop ensures proper styling and behavior.
  </Accordion>
</Accordion>

Component Flutter

Component Design

Anatomy

---

Variants

---

	Basic Accordion The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.
	Nested Accordion The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.

Key Properties

Title The text displayed at the top of the accordion section, representing the title of the content. This is a required property and is typically used to describe the section's content or topic.
Children The content that will be displayed inside the accordion when it is expanded. This can include text, images, or other components. This is a required property and holds the main body of the accordion's collapsible section.
Icon An optional icon displayed beside the title. Icons are used to enhance the visual appeal or convey meaning alongside the title text, such as indicating expand/collapse actions or providing context to the content. The width / height of the icon can be controlled through the Icon Width property to ensure it fits well with the title or the overall design of the accordion.
Initially Open Determines whether the accordion section is open by default when the component is first rendered. Setting this to true will make the accordion section expanded by default, while the default value false keeps it collapsed initially.
Hide Card Border Controls whether the border around the accordion section is visible. Defaults to false, showing the border.
Hide Divider Specifies whether the divider line between the title and content is visible. Defaults to false, meaning the divider is shown.
Serial Number An optional number to display before the title. This can be used for ordered sections or lists within the accordion.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

React

Property	Value	Default
title	string	-
children	string	-
icon	string	-
iconFill	string	-
iconWidth	string	-
iconHeight	string	-
number	number	-
isOpenInitially	boolean	false
onToggle	function	-
customClassName	string	-
customStyles	object	-
hideCardBorder	boolean	false
hideDivider	boolean	false
hideCardBg	boolean	false
hideBorderRadius	boolean	false
isClosed	boolean	false
isChild	boolean	-

Flutter

Behaviours

---

	Flexible Width The width of the container defines the width of the accordion.
	Text Overflow The text will overflow / wrap to the next line based on the width of the accordion. The limit to the volume of text is not defined.
	Animation The opening and closing movements of an accordion has an “Ease in” animation. The arrow which face sideways in the closed state rotate to facing downwards in the open state.

Usage Guide

---

	Use for compact information display Organise dense or hierarchical content like FAQs, step-by-step instructions, or grouped data to avoid overwhelming users with too much visible information. Avoid placing simple messages inside Accordions. Since the content is brief and doesn't require hiding, displaying it openly ensures that users see it immediately without extra steps.

Change log

---

Date	Number	Notes

Design Checklist

---

Filter

	All interactive states Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible contrast for text Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible contrast for UI components Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Keyboard interactions Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states...etc)
	Defined behaviors Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit Access to the design file for the component in Figma multiple options, states, color themes, and platform scales.