Component

Command Input

A contenteditable text field that detects trigger characters (like @ or /) and surfaces a popover for mentions, slash-commands, and autocomplete. Rendering of the popover is fully delegated via a render prop.

Mentions

A single @ trigger drives a mention popover.

Type @ to trigger the mention popover.

Multiple triggers

Register any number of triggers — the active trigger char is passed to renderPopover so you can branch on it.

Triggers on / and #.

Installation

$pnpm add @refraction-ui/react-command-input

Usage

tsx
import { CommandInput } from '@refraction-ui/react-command-input'
import { useState } from 'react'

export function MentionField() {
  const [value, setValue] = useState('')
  return (
    <CommandInput
      value={value}
      onChange={setValue}
      triggers={[{ char: '@' }]}
      renderPopover={({ isOpen, trigger, search }) =>
        isOpen ? <div>Mentioning {trigger} {search}</div> : null
      }
    />
  )
}

Props

PropTypeDefaultDescription
valuestring''Current text content of the input.
onChange(value: string) => void--Called with the raw text whenever the content changes.
triggersTrigger[][]Characters that open the command popover, e.g. `[{ char: "@" }, { char: "/" }]`. Each trigger may also carry an optional `pattern` RegExp.
renderPopover(props: { isOpen, trigger, search, close, position }) => ReactNode--Render prop for the popover shown after a trigger fires. Receives the active trigger char, current search query, a `close()` callback, and caret position.
classNamestring--Additional CSS classes for the wrapper.