Collapsible
One panel that opens and closes.
Basic
Use this for one region that you show or hide, such as advanced options. Click the trigger to open and close the panel.
Paste the snippet into the <head> of your site. Events show up in PostHog in a few seconds.
Controlled
Pass open and onOpenChange to keep the state in your component. Here, a button outside the collapsible also opens it.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- For a list of sections, such as an FAQ, use Accordion.