Mention

Componente de entrada para mencionar usuários, tags ou outras entidades com sugestões de autocompletar.

Importação

import { Mention } from 'asterui'

Exemplos

Mention Básico

Entrada de menção simples com acionador @.

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={users}
          value={text}
          onChange={setText}
          placeholder="Type @ to mention someone"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

Prefixo Personalizado

Usando prefixo # para menções de hashtag.

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={tags}
          value={text}
          onChange={setText}
          prefix="#"
          placeholder="Type # to add hashtag"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

Múltiplos Acionadores

Usando múltiplos componentes de menção com diferentes prefixos.

</>

import { Mention, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [userText, setUserText] = useState('')
  const [tagText, setTagText] = useState('')
  
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block mb-2 text-sm font-medium">
            Mention Users (@)
          </label>
          <Mention
            options={users}
            value={userText}
            onChange={setUserText}
            prefix="@"
            placeholder="Type @ to mention users"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {userText || '(empty)'}
          </div>
        </div>
  
        <div>
          <label className="block mb-2 text-sm font-medium">
            Add Tags (#)
          </label>
          <Mention
            options={tags}
            value={tagText}
            onChange={setTagText}
            prefix="#"
            placeholder="Type # to add tags"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {tagText || '(empty)'}
          </div>
        </div>
      </Space>
    )
}

export default App

API

Mention

Propriedade	Descrição	Tipo	Padrão
options	Array de opções de menção	Array<{ value: string, label: string }>	-
value	Valor controlado	string	-
onChange	Callback quando valor muda	(value: string) => void	-
prefix	Caractere que aciona sugestões de menção	string	'@'
split	Caractere usado para dividir menções na entrada	string	-
placeholder	Texto placeholder da entrada	string	-
disabled	Desabilitar a entrada de menção	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Navegação por Teclado

• ↑ / ↓ - Navegar pelas sugestões de menção
• Enter - Selecionar menção destacada
• Esc - Fechar dropdown de menção

Acessibilidade

• Suporte completo de navegação por teclado para selecionar menções
• Atributos ARIA para leitores de tela anunciarem sugestões
• Gerenciamento de foco quando dropdown abre e fecha
• Indicadores visuais claros para itens selecionados e focados