# FAQ

> Accessible FAQ and accordion island with single-open or multiple-open behavior

Canonical URL: https://fa7e86e3d553:3005/islands/content/faq

Use `FAQ` for reusable product questions, shipping, returns, sizing, care, and
policy disclosures. It provides animated disclosure behavior without custom
markup or a headless implementation.

## Preview

**Category**: Content

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| items | array | yes | - | Array of FAQ objects with question (string) and answer (string) |
| variant | enum | no | default | Display style: 'default' or 'compact' |
| mode | `"single" \| "multiple"` | no | `"single"` | Whether opening one item closes the previous item |
| initiallyOpen | number[] | no | `[]` | Zero-based item indexes opened on first render |
| icon | `"plus" \| "chevron" \| "none"` | no | `"plus"` | Disclosure icon style |

Each item may also include `id` and `initiallyOpen`. In `single` mode, the
first requested item wins when more than one item is marked open.

## Embed example

```html
<lx-island name="FAQ">
  <script type="application/json">
{
  "items": [
    {
      "question": "How long does shipping take?",
      "answer": "Standard shipping takes three to five business days."
    },
    {
      "question": "Can I return it?",
      "answer": "Unused products can be returned within 30 days."
    }
  ],
  "mode": "single",
  "initiallyOpen": [0],
  "icon": "chevron"
}
  </script>
</lx-island>
```

## Interaction and accessibility

- Summary controls expose `aria-expanded` and `aria-controls`.
- Answer panels use labelled region semantics.
- Arrow Up and Arrow Down move between questions.
- Home and End move to the first and last question.
- Enter and Space use native button activation.
- Controls provide visible focus styling and a 44px minimum target.
- Opening and closing animation is disabled when the visitor prefers reduced
  motion.

## Tips

- Keep questions under 100 chars for mobile readability
- Order by importance — most common questions first
- 4-8 items is optimal (too many overwhelm)
- `variant:"compact"` reduces spacing for sidebar or modal use
- Use `mode:"multiple"` for technical specifications customers may compare
- Use for objection handling: address common purchase blockers (shipping time, returns, ingredients)
- Do not hide critical purchase terms that should remain visible

## Stylable Parts

Target internal elements with `::part()` or the generated `data-part` hooks:

| Part | Description |
|------|-------------|
| `answer` | FAQ answer content |
| `content` | Animated answer region |
| `icon` | Icon element |
| `item` | Repeated item element |
| `question` | Question text |
| `root` | Outermost container |
| `summary` | Interactive disclosure button |

```css
/* Example: card-style questions with hover */
[data-section-id='SECTION'] [data-part='item'] {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}
[data-section-id='SECTION'] [data-part='question']:hover {
  color: var(--lx-accent-color);
}
```

## Related Islands

- [IngredientExplorer](/islands/engagement/ingredient-explorer) — Ingredient-specific education
- [BuyBox](/islands/commerce/buy-box) — Primary PDP purchase interface
- [ReviewList](/islands/social-proof/review-list) — Longer customer evidence