ComposerSuggestions

Headless inline @/# autocomplete behavior paired with composable, theme-aware suggestion parts.

Preview#

Use @ to mention people or # to find channels.

Anatomy#

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>

Usage#

People#

Channels#

Filtered people#

API#WIP

useComposerSuggestions#

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.

ComposerSuggestionList#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Popup container. Spread getListProps onto it.

ComposerSuggestionGroup#

Prop	Type	Default	Description
`separated`	boolean	false	Adds top spacing when stacking multiple groups.
`...props`	useRender.ComponentProps<"div">	—	Optional visual group of suggestion options.

ComposerSuggestionGroupLabel#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Optional label for a suggestion group.

ComposerSuggestionOption#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Visual option root. Spread getOptionProps onto it so highlighted and disabled states remain keyboard-complete.

ComposerSuggestionContent#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Flexible content row for title, metadata, and trailing content.

ComposerSuggestionIcon#

Prop	Type	Default	Description
`variant`	"avatar" \| "framed" \| "auxiliary"	"avatar"	Leading icon treatment for avatar, framed glyph, or auxiliary affordance.
`...props`	useRender.ComponentProps<"span">	—	Leading icon or avatar slot.

ComposerSuggestionTitle#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Primary option label.

ComposerSuggestionMeta#

Prop	Type	Default	Description
`variant`	"text" \| "code"	"text"	Secondary option text style.
`...props`	useRender.ComponentProps<"span">	—	Secondary option text.

ComposerSuggestionAside#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Trailing option content slot.