Components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@tulip-systems/core/components/client";<Accordion type="single" collapsible defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
</Accordion>Examples
Basic
A basic accordion that shows one item at a time. The first item is open by default.
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Multiple
Use type="multiple" to allow multiple items to be open at the same time.
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Disabled
Use the disabled prop on AccordionItem to disable individual items.
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Card
Wrap the Accordion in a Card component.