jatui

ChipInput

Contenteditable input with inline chips and autocomplete

@-mention demo

Type @ to trigger the mention dropdown.

Type a message, use @ to mention…

Plain (no trigger)

Plain contenteditable…

Props

PropTypeDefaultDescription
valuestring""Serialized content (bindable)
placeholderstring""Placeholder text
triggerCharstring-Character that opens autocomplete (e.g. "@")
onTrigger(query) => ChipSuggestion[]-Returns autocomplete suggestions
onChipCreate(suggestion) => ChipInfo-Builds the chip DOM from a suggestion
onSerialize(el) => string-Converts a chip element back to text
rowsnumber3Visual height in lines
disabledbooleanfalseDisable editing
compactbooleanfalseDenser layout
monospacebooleanfalseMonospace font