# Accordion 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.

{% tabs %} {% tab title="Component React" %} ``` // Sample code {}} title="Section Header" > This is a nested accordion demonstrating component composition. The isChild prop ensures proper styling and behavior. ``` {% endtab %} {% tab title="Component Flutter" %} ``` // Sample code DigitAccordion( header: Text('Accordion'), content: Text('This is the content of Accordion'), initiallyExpanded: false, divider: true, showBorder: true, ), ``` {% endtab %} {% tab title="Component Design" %} {% endtab %} {% endtabs %} ## 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.

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. {% tabs %} {% tab title="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 | - | | {% endtab %} | | | {% tab title="Flutter" %}

Property	Value	Default
Title	String	required(if header is not passed)
Number	double	-
Icon	Icon widget	-
header	Widget	-
content	Widget	required
divider	bool	false
initiallyExpanded	bool	false
showBorder	bool	false
onToggle	VoidCallBack Function	-

{% endtab %} {% endtabs %} ## 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.

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.

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 ***


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