Code

Usage

import {
Accordion,
AccordionContent,
AccordionHeading,
AccordionItem,
} from "@twilio-labs/match/components";
const Component = () => (
<Accordion>
<AccordionItem>
<AccordionHeading>{"Some heading"}</AccordionHeading>
<AccordionContent>{"Some content to be rendered"}</AccordionContent>
</AccordionItem>
</Accordion>
);

Props

PropTypeDefaultDescription
allowMultiple?booleanfalseAllow multiple accordion items to be expanded.
openFirstHeading?booleanfalseAutomatically expand first accordion item.

Guidelines

Accordions

Accordions are useful for hiding large amounts of content unless the user wants to learn more about a topic. A good use-case would be a FAQ section. Make sure the content of an accordion item pertains to the corresponding heading.

Composition

Accordions inherit font size from their parent container. Make sure that the content within a heading pertains to the heading.

Accordions should contain at least 3-6 heading to be truly useful, otherwise regular content may suffice.


Examples

Primary

The standard accordion allows at most one item to be expanded at a time. By default, before the user has interacted with the accordion, no items are expanded.

openFirstHeading

openFirstHeading automatically expands the first accordion item, i.e. its heading and content. The user can then proceed to close the opened item and/or open another accordion item by interacting with their headings.

allowMultiple

allowMultiple allows the user to keep any number of accordion items open at a time.