Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@momo-webplatform/mobase";<Accordion collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that matches the other components'
aesthetic.
</AccordionContent>
</AccordionItem>
...
</Accordion>API Reference
Accordion component extends Radix Accordion (opens in a new tab) component and supports all of its props.
Accordion
| Prop | Type | Default | Required |
type | enumsingle | multiple | -- | true |
value | enumstring | string[] | -- | false |
defaultValue | enumstring | string[] | -- | false |
onValueChange | enum((value: string) => void) | ((value: string[]) => void) | -- | false |
collapsible | enumboolean | false | false |
disabled | enumboolean | -- | false |
orientation | React.AriaAttributes | vertical | false |
dir | enumDirection | -- | false |
asChild | enumboolean | -- | false |
AccordionItem
| Prop | Type | Default | Required |
css | string | -- | false |
disabled | enumboolean | -- | false |
value | string | -- | true |
asChild | enumboolean | -- | false |
AccordionTrigger
| Prop | Type | Default | Required |
css | string | -- | false |
asChild | enumboolean | -- | false |
AccordionContent
| Prop | Type | Default | Required |
css | string | -- | false |
asChild | enumboolean | -- | false |
forceMount | true | -- | false |
Best practices
- The title should be a short message that summarize the content of the accordion.
- Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
- When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.
Accessibility
It allows keyboard navigation to open and close the accordions