I9kFaqList

List of collapsible question/answer pairs composed from I9kCollapsible. Use it for plain-text FAQ content without wiring open/close state.

View as MarkdownView source

import { I9kFaqList } from '@9klabs/design';

Examples

Default

Is this library tree-shakeable?

Yes — each component is a separate export, so unused ones are dropped at build time.

Does it support right-to-left layouts?

Yes, every component is checked in both LTR and RTL, and logical CSS properties are used throughout.

Can I use it outside a Vue Router app?

Yes — components that render links accept a plain href by default and only need a router component when you pass one explicitly.

<I9kFaqList :items="[
  { question: 'Is this library tree-shakeable?', answer: 'Yes — each component is a separate export, so unused ones are dropped at build time.' },
  { question: 'Does it support right-to-left layouts?', answer: 'Yes, every component is checked in both LTR and RTL, and logical CSS properties are used throughout.' },
  { question: 'Can I use it outside a Vue Router app?', answer: 'Yes — components that render links accept a plain href by default and only need a router component when you pass one explicitly.' },
]" />

Watch out

• Each item's question string is used as its list key — keep questions unique within a single items array.
• question and answer are plain text only; there is no slot for markup or links inside an item.
• Items expand independently via native <details> — opening one never closes another.

API

Props

Prop	Type	Default	Required
items	I9kFaqItem[]	—	yes

Types

export interface I9kFaqItem {
  question: string;
  answer: string;
}

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kFaqList from @9klabs/design to render a list of collapsible FAQ entries.

import { I9kFaqList } from '@9klabs/design';
// Item shape: { question: string; answer: string }
// This type (I9kFaqItem) is not exported from the package; inline the object shape or declare
// your own local type.

Props:
- items: I9kFaqItem[] (required) — each item renders as a native <details>/<summary> pair; each item's `question` is used as its Vue :key, so keep questions unique within one list.

Emits: none.

Slots: none — question and answer are plain text per item, not slots.

Behavior: each item is rendered through I9kCollapsible and retains independent native <details> state. Opening one item never closes another, and no Vue state wiring is required.

IMPORTANT: both `question` and `answer` render as plain text — there is no way to pass markup or links into an item; keep answers to plain sentences.

Usage:
<I9kFaqList :items="[{ question: 'Is this library tree-shakeable?', answer: 'Yes — each component is a separate export, so unused ones are dropped at build time.' }]" />