Accordion
Collapsible sections for grouped content.
Collapsible sections for grouped content.
Import
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from 'bmates-ui';Basic usage
The example below mirrors the primary Storybook composition and can be used as a starting point.
{/* One item may be open at a time. */}
<Accordion defaultValue="account">
<AccordionItem value="account">
<AccordionTrigger>Account</AccordionTrigger>
<AccordionContent>
Manage your profile and notification settings.
</AccordionContent>
</AccordionItem>
<AccordionItem value="billing">
<AccordionTrigger>Billing</AccordionTrigger>
<AccordionContent>View invoices and payment methods.</AccordionContent>
</AccordionItem>
</Accordion>Preview
{/* One item may be open at a time. */}
<Accordion defaultValue="account">
<AccordionItem value="account">
<AccordionTrigger>Account</AccordionTrigger>
<AccordionContent>
Manage your profile and notification settings.
</AccordionContent>
</AccordionItem>
<AccordionItem value="billing">
<AccordionTrigger>Billing</AccordionTrigger>
<AccordionContent>View invoices and payment methods.</AccordionContent>
</AccordionItem>
</Accordion>Prop previews
The examples below isolate the props that change visual output or interaction.
Multiple items
<Accordion type="multiple" defaultValue={["one", "two"]}>...</Accordion>Disabled item
<AccordionItem value="two" disabled>...</AccordionItem>Custom indicator
<AccordionTrigger indicator="+">Section</AccordionTrigger>Component API
type
Allows one open item or several open items.
defaultValue
Initially open item value. Use a string array with multiple.
AccordionItem.value
Required, unique identifier for an item.
AccordionItem.disabled
Prevents its trigger from changing the item.
AccordionTrigger.indicator
Replaces the default disclosure indicator.
Usage notes
- Every component in the table is exported from
bmates-ui. - Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
- For application-owned state, use a controlled value and its change handler instead of only a
default*prop.