## Mention Input (S—132)

A comment box where typing @ opens a filtered people list; picking someone inserts a mention token.

- URL: https://sundaeui.dev/components/mention-input
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/mention-input.json`
- Tags: tag-people, autocomplete, mention, textarea, comment, at

Type @ and a small list appears under the caret, filtering as you type. Arrow keys and Enter pick, Escape dismisses, and the mention is inserted as @Name with a trailing space.
Mentions render bold in the preview line under the field, and the list of mentioned people is returned with the text.

### Usage

```tsx
import { MentionInput } from '@/components/sundae/mention-input'

<MentionInput />
```

### Props

- `people` (`{ id: string; name: string; handle: string }[]`, required): People to mention.
- `onSubmit` (`(text: string, mentions: string[]) => void`): Called on post.
- `placeholder` (`string`): Placeholder.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Comments, chat, task descriptions, docs.

### When not to use

- Rich text editors: use the editor’s own mention plugin.

### Accessibility

- The textarea is a combobox while the list is open, with aria-activedescendant on the active person.
- Escape closes the list without clearing text.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- @: Open people list
- ↑ / ↓: Move
- Enter / Tab: Insert
- Esc: Close