# Suggested prompt group

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/suggested-prompt-group
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=1058-3

```tsx
import { SuggestedPromptGroup } from '@commenda/pathfinder/suggested-prompt-group';

<SuggestedPromptGroup
  items={prompts}
  onSelect={(prompt) => {
    setDraft(prompt);
    editorRef.current?.focus();
  }}
/>;
```


## Usage [#usage]

```tsx
import { SuggestedPromptGroup } from '@commenda/pathfinder/suggested-prompt-group';

<SuggestedPromptGroup
  items={[
    { id: 'filings', label: 'Which filings are due in the next 30 days?' },
    { id: 'gst', label: 'Reconcile my GST return' },
    { id: 'entities', label: 'Review entity details' },
  ]}
  onSelect={(prompt, item) => {
    setDraft(prompt);
    recordPromptSelection(item.id);
  }}
/>;
```

## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `items` | `readonly SuggestedPromptItem[]` | required | Stable unique IDs, labels, optional prompt text and disabled state |
| `onSelect` | `((prompt: string, item: SuggestedPromptItem) => void)` | required | Text plus original item for analytics or host behavior |
| `label` | `string` | optional | Accessible group label; defaults to `Suggested prompts` |
| `disabled` | `boolean` | optional | Disables every prompt |
| `className` | `string` | optional | Host layout |

## Design rules [#design-rules]

- **PROMPT-GROUP-01:** Recommend three or four relevant prompts with an 8px wrapping gap. Never force a horizontally overflowing row.
- Empty input renders nothing. Existing item order is preserved; no selection, randomization, fetching, or sending happens internally.
- The group uses native button keyboard behavior, not radio or tab semantics. Each prompt remains independently reachable.

For AI Elements migration, map each existing Suggestion's text and click callback to a SuggestedPrompt item and `onSelect`. Keep request handling and analytics in the application.