Source: https://primereact.org/mention/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Mention

Mention component is used to tag objects in a text.

Import#

import { Mention } from 'primereact/mention';

Copy

Basic#

Mention is used as a controlled component with value and onChange properties. In addition, suggestions and a onSearch are required to query the results.

<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />

Copy

Triggers#

It is used to define the expected keyword/s in the input field to mention someone or something.

<Mention value={value} onChange={(e) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
    field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />

Copy

Auto Resize#

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />

Copy

Float Label#

A floating label appears on top of the input field when focused.

New Post

<span className="p-float-label">
    <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
        field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
    <label htmlFor="newpost">New Post</label>
</span>

Copy

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.

<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

<Mention disabled />

Copy

Accessibility#

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list.

The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.

<label htmlFor="men1">Username</label>
<Mention inputId="men1" />

<span id="men2">Email</span>
<Mention aria-labelledby="men2" />

<Mention aria-label="City" />

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | | up arrow | Highlights the previous item if popup is visible. | | down arrow | Highlights the next item if popup is visible. | | enter | Selects the highlighted item and closes the popup if popup is visible. | | home | Highlights the first item if popup is visible. | | end | Highlights the last item if popup is visible. | | escape | Hides the popup. |

Import
Basic
Triggers
Auto Resize
Float Label
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek