Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Preview

Zostel is India's largest chain of backpacker hostels, offering affordable stays in beautiful destinations across India and Nepal. We provide a community-driven travel experience with common areas, events, and curated local experiences.

Usage

tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "zostel-ui";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Zostel?</AccordionTrigger>
    <AccordionContent>
      Zostel is India's largest chain of backpacker hostels.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I book?</AccordionTrigger>
    <AccordionContent>
      Book directly on our website or app.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

type
Type: "single" | "multiple"
Default: "single"

Whether one or multiple items can be opened at the same time.

collapsible
Type: boolean
Default: false

When type is "single", allows closing the open item.

defaultValue
Type: string | string[]
Default: —

The value(s) of the item(s) to expand by default.

value
Type: string | string[]
Default: —

The controlled value(s) of the expanded item(s).

onValueChange
Type: (value: string | string[]) => void
Default: —

Callback fired when expanded items change.
Previous Tabs Next Collapsible