Todos los componentes (204)

Etiquetas

Campos · TagsInput

Qué es y cuándo usarlo

Campo de etiquetas: se escribe y cada etiqueta se cierra con Intro o con una coma, se pegan varias de golpe y se quitan con su aspa o con Retroceso en el campo vacío. No hay lista de opciones: la etiqueta es lo que se escribe.

Cuándo usarlo

Palabras clave, correos de invitados, alias: valores libres que el usuario inventa.
validate rechaza una etiqueta y dice por qué (se queda escrita para corregirla); transform la normaliza antes de guardarla.
No admite repetidas (sin distinguir mayúsculas) ni más de max. Con name viaja un campo oculto por etiqueta.

Cuándo no

Elegir entre opciones que ya existen: MultiSelect. Una sola con texto libre: Combobox.

Teclado: Intro, coma y punto y coma cierran; Retroceso en vacío quita la última; flechas entre etiquetas.

Accesibilidad: cada cosa que pasa se anuncia (añadida, quitada, ya estaba, lleno) en una región viva. El error queda enlazado al campo.

Cómo se ve

Palabras clave

plata

anillo

Hasta cinco · 2 de 5

<TagsInput
  label="Palabras clave"
  placeholder="Escribe y pulsa Intro"
  initialValue={["plata", "anillo"]}
  max={5}
  hint="Hasta cinco"
/>

Props

Se importa con import { TagsInput } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: nombra el campo y el grupo de etiquetas.
`allowsDuplicates`	`boolean`	Con `true` admite la misma etiqueta dos veces. Por defecto, no (sin distinguir mayusculas).
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`commitOnBlur`	`boolean`	Si el texto que queda escrito al salir del campo se convierte en etiqueta. Por defecto, si.
`disabled`	`boolean`	—
`error`	`string`	Error de fuera (del servidor). Manda sobre el que calcula el campo.
`hint`	`string`	—
`initialValue`	`readonly string[]`	Las etiquetas al empezar, sin controlarlas desde fuera.
`invalid`	`boolean`	—
`max`	`number`	Cuantas etiquetas caben como maximo. Sin esto, las que haga falta.
`name`	`string`	Para que viajen en un formulario nativo: un campo oculto por etiqueta, con este nombre.
`onChange`	`(tags: readonly string[]) => void`	Avisa con la lista entera cada vez que cambia.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`renderTag`	`(tag: string) => ReactNode`	Lo que se ve de cada etiqueta, cuando es mas que su texto.
`required`	`boolean`	—
`separators`	`readonly string[]`	Los caracteres que cierran una etiqueta al escribirlos, ademas de Intro. Por defecto, `,` y `;`.
`size`	`"sm" \| "md" \| "lg"`	—
`transform`	`(tag: string) => string`	Cambia la etiqueta antes de guardarla (por ejemplo, a minusculas).
`validate`	`(tag: string) => string \| null`	Comprueba una etiqueta antes de aceptarla: devuelve el motivo si no vale, o `null`.
`value`	`readonly string[]`	Las etiquetas, controladas desde fuera.
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: