ComposerSuggestions
Headless inline @/# autocomplete behavior paired with composable suggestion parts.
Use @ to mention people or # to find channels.
import {
Composer,
ComposerActions,
ComposerInput,
ComposerMeta,
ComposerRoot,
ComposerSubmit,
ComposerSuggestionAside,
ComposerSuggestionContent,
ComposerSuggestionGroup,
ComposerSuggestionGroupLabel,
ComposerSuggestionIcon,
ComposerSuggestionList,
ComposerSuggestionMeta,
ComposerSuggestionOption,
ComposerSuggestionTitle,
ComposerToolbar,
ComposerToolbarLabel,
} from "raft-ui";
<ComposerRoot>
<ComposerSuggestionList>
<ComposerSuggestionGroup>
<ComposerSuggestionGroupLabel />
<ComposerSuggestionOption>
<ComposerSuggestionIcon />
<ComposerSuggestionContent>
<ComposerSuggestionTitle />
<ComposerSuggestionMeta />
<ComposerSuggestionAside />
</ComposerSuggestionContent>
</ComposerSuggestionOption>
</ComposerSuggestionGroup>
</ComposerSuggestionList>
<Composer>
<ComposerInput />
<ComposerToolbar>
<ComposerActions />
<ComposerMeta>
<ComposerToolbarLabel />
<ComposerSubmit />
</ComposerMeta>
</ComposerToolbar>
</Composer>
</ComposerRoot>Every row stays one line with the same height. Space goes to the name first; the description only uses what is left and truncates (or disappears) first. The name truncates only when it alone cannot fit, with the full name on hover. Handles show in full up to a third of the row, then truncate.
Wide
336px · composer in a 360px thread panel
288px · narrow phone
valuestring
Controlled composer draft.
onValueChange(value: string) => void
Called when typing or insertion changes the draft.
detectTrigger(textBeforeCaret: string) => ComposerSuggestionTriggerMatch | null
Caller-owned trigger parser. The match identifies the marker, query, and marker start index before the caret.
getItems(match: ComposerSuggestionTriggerMatch) => readonly TItem[]
Returns items for the active trigger. An empty list closes the popup.
getItemText(item: TItem) => string
Returns the insertion text for a selected item.
isItemDisabled(item: TItem) => boolean
Optional disabled predicate. Disabled items remain visible but are skipped by keyboard navigation and cannot be selected.
getInputProps(props?) => textarea props
Merges textarea value, keyboard handling, refs, and combobox semantics.
getListProps(props) => listbox props
Merges listbox role, id, and ref.
getOptionProps(item, index, props?) => option props
Merges option identity, highlight state, selection, and pointer behavior.
openboolean
Whether an active trigger has suggestion items.
itemsreadonly TItem[]
Items for the active trigger.
highlightedIndexnumber
Keyboard-highlighted item index, or -1.
activeItemTItem | undefined
Currently highlighted item, when one exists.
select(item: TItem) => void
Inserts a selectable item's text in place of the trigger.
insert(text: string) => void
Inserts text at the current caret.
clear() => void
Clears the draft and closes suggestions.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled composer draft. |
onValueChange | (value: string) => void | — | Called when typing or insertion changes the draft. |
detectTrigger | (textBeforeCaret: string) => ComposerSuggestionTriggerMatch | null | — | Caller-owned trigger parser. The match identifies the marker, query, and marker start index before the caret. |
getItems | (match: ComposerSuggestionTriggerMatch) => readonly TItem[] | — | Returns items for the active trigger. An empty list closes the popup. |
getItemText | (item: TItem) => string | — | Returns the insertion text for a selected item. |
isItemDisabled | (item: TItem) => boolean | — | Optional disabled predicate. Disabled items remain visible but are skipped by keyboard navigation and cannot be selected. |
getInputProps | (props?) => textarea props | — | Merges textarea value, keyboard handling, refs, and combobox semantics. |
getListProps | (props) => listbox props | — | Merges listbox role, id, and ref. |
getOptionProps | (item, index, props?) => option props | — | Merges option identity, highlight state, selection, and pointer behavior. |
open | boolean | — | Whether an active trigger has suggestion items. |
items | readonly TItem[] | — | Items for the active trigger. |
highlightedIndex | number | — | Keyboard-highlighted item index, or -1. |
activeItem | TItem | undefined | — | Currently highlighted item, when one exists. |
select | (item: TItem) => void | — | Inserts a selectable item's text in place of the trigger. |
insert | (text: string) => void | — | Inserts text at the current caret. |
clear | () => void | — | Clears the draft and closes suggestions. |
...propsuseRender.ComponentProps<"div">
Popup container. Spread getListProps onto it.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Popup container. Spread getListProps onto it. |
separateddefault: falseboolean
Adds top spacing when stacking multiple groups.
...propsuseRender.ComponentProps<"div">
Optional visual group of suggestion options.
| Prop | Type | Default | Description |
|---|---|---|---|
separated | boolean | false | Adds top spacing when stacking multiple groups. |
...props | useRender.ComponentProps<"div"> | — | Optional visual group of suggestion options. |
...propsuseRender.ComponentProps<"div">
Optional label for a suggestion group.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Optional label for a suggestion group. |
...propsuseRender.ComponentProps<"div">
Visual option root. Spread getOptionProps onto it so highlighted and disabled states remain keyboard-complete.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Visual option root. Spread getOptionProps onto it so highlighted and disabled states remain keyboard-complete. |
...propsuseRender.ComponentProps<"div">
Flexible content row for title, metadata, and trailing content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Flexible content row for title, metadata, and trailing content. |
variantdefault: "avatar""avatar" | "framed" | "auxiliary" | "inline"
Leading icon treatment for avatar, framed glyph, or auxiliary affordance; inline is a text-sized glyph inside the row (e.g. human vs agent) that never shrinks.
...propsuseRender.ComponentProps<"span">
Leading icon or avatar slot.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "avatar" | "framed" | "auxiliary" | "inline" | "avatar" | Leading icon treatment for avatar, framed glyph, or auxiliary affordance; inline is a text-sized glyph inside the row (e.g. human vs agent) that never shrinks. |
...props | useRender.ComponentProps<"span"> | — | Leading icon or avatar slot. |
...propsuseRender.ComponentProps<"span">
Primary option label.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Primary option label. |
variantdefault: "text""text" | "code"
Secondary option text style.
...propsuseRender.ComponentProps<"span">
Secondary option text.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "text" | "code" | "text" | Secondary option text style. |
...props | useRender.ComponentProps<"span"> | — | Secondary option text. |
...propsuseRender.ComponentProps<"span">
Trailing option content slot.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Trailing option content slot. |