Formularios

Mentions

Un área de texto donde @ sugiere personas para mencionar.

import { Mentions } from '@alea/ui';

Ejemplos

Menciones

Escribe @ para mencionar a alguien.

Comment

@ suggests teammates

Props

`Mentions` props

Un área de texto donde @ sugiere personas para mencionar; las flechas eligen, Enter inserta.

Prop	Tipo	Por defecto	Descripción
`options`obligatoria	`{ id: string; label: string; description?: string \| undefined; }[]`	-	Personas o cosas para mencionar.
`defaultValue`	`string`	`''`	El texto al inicio.
`description`	`ReactNode`	-	Texto de ayuda mostrado bajo el campo.
`label`	`ReactNode`	-	La etiqueta visible.
`onChange`	`((value: string) => void)`	-	Se llama con el texto.
`placeholder`	`string`	-	Se muestra mientras no hay valor.
`rows`	`number`	`3`	Filas del área de texto. Por defecto 3.
`trigger`	`string`	`'@'`	Carácter que inicia una mención. Por defecto @ .
`value`	`string`	-	El texto (controlado).

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Motion: nudge
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-mentions.alea-mentions-wrap.alea-input.alea-textarea.alea-mentions-list.alea-option-text.alea-option-desc

El área de texto es un combobox mientras hay sugerencias; se anuncia la resaltada.

Teclado

Tecla	Acción
`@ y luego letras`	Sugiere
`Flecha arriba` / `Abajo`	Se mueven
`Enter` o `Tab`	Inserta
`Escape`	Cierra la lista

Qué hacer y qué evitar

Hacer

Muestra el usuario y el nombre de la persona en las sugerencias.
Limita las sugerencias a unas ocho.

Evitar

No las actives con caracteres que la gente escribe por otras razones.
No envíes notificaciones sin avisar a quien escribe.