Sections
StableA long answer in foldable sections that open as they stream in.
Also known as accordion, collapsible sections, expandable sections, faq
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
While the answer streams
- Out
- Fri 8:10, 1h 15m
- Back
- Sun 19:40, 1h 20m
- Fare
- €138 return
Montmartre is quiet in the evenings; the Marais is closer to the museums. Both are 20 minutes from the station.
<Sections streaming={isStreaming} sections={[
{ id: "flights", title: "Flights", meta: "2 options", content: <FactList facts={flightFacts} /> },
{ id: "stay", title: "Where to stay", meta: "3 hotels", content: stayText },
{ id: "plan", title: "Day by day", meta: "2 days", content: planText },
]} />Each new section opens as it arrives, then the answer settles on the first.
When to use it
Keeps a long, structured answer short to scan, without hiding where the answer is while it is still being written.
Made of: Section heading · Short line · Chevron · Section content
Use it for
- Trip plans, reports and comparisons with clear parts.
- Answers that stream in part by part.
Not for
- One section that people open and close: use Collapsible.
- The assistant's reasoning, shown on request: use ThinkingBlock.
- Steps the assistant is working through: use PlanCard.
Do and avoid
Do
- Use a few sections with clear titles.
- Keep ids stable while streaming.
- Let the person's choice win once they open or close one.
Avoid
- Do not fold an answer of one or two short paragraphs.
- Do not move sections after the person has opened one.
- Do not hide the only important part in a folded section.
On a phone
- Titles wrap; the short line moves under the title when there is no room.
- Each heading is a full-width button, easy to tap.
Seen in products
- OpenUI's SectionBlock opens each new section as it streams in and folds back to the first when the answer ends, unless the person has already clicked.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| sectionsrequired | { id: string; title: string; meta?: string; content: ReactNode }[] | none | The sections, in order. Ids stay the same while the answer streams. |
| streaming | boolean | false | The answer is still arriving: each new section opens; when it ends, the first stays open. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of each section's heading. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- streaming
- The newest section is open; earlier ones fold as each new one arrives.
- finished
- The first section is open and the rest are folded.
- person chose
- After the person opens or closes a section, nothing moves on its own.
- focus
- Each section heading button shows a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface--line--fg--fg-muted--radius-card
Built in
- Each section title is a heading wrapping a button with aria-expanded.
- Folded content is hidden from everyone, not just from sight.
- Opening and closing follow reduced motion.
What you need to do
- Write section titles that say what is inside.
- Keep the id of a section the same while the answer streams, so it keeps its open state.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide