Todos los componentes (244)

Selector de personas

Elección · PeoplePicker

Qué es y cuándo usarlo

Elegir a varias personas: a quién se invita a una reunión, quién va en un grupo, a quién se asigna un ticket. Es un MultiSelect con la gente dentro: cada opción lleva su avatar con el punto de presencia, el nombre y una línea de debajo, y cada elegida sale como ficha con su avatar.

Cuándo usarlo

Invitar, asignar, compartir: cualquier sitio donde se elige a gente de una lista que se conoce.
people lleva a cada persona con su key, su name, su foto (src), su presencia (status) y una description (el cargo, el equipo).
exclude con las claves de quien ya está dentro del grupo: no se ofrece, que elegirlo dos veces no tiene sentido.
Los conectados van primero, que es a quien se suele buscar; byPresence={false} deja el orden en que llegan.
Todo lo del MultiSelect sigue valiendo: max, limitTags, serverFiltered y onType para buscar en el servidor, loading...

Cuándo no

Elegir a una sola persona: Select con renderOption y un Avatar dentro.
Enseñar quién está, sin elegir: AvatarGroup.

Teclado: el del MultiSelect: se escribe para filtrar, las flechas recorren la lista, Intro elige, Retroceso quita la última ficha y Tab pasa por cada ficha y su aspa.

Accesibilidad: lo que se lee es el nombre, y la presencia va como descripción de la opción («Marta Ruiz, Dirección · en línea»): el punto de color solo no la cuenta. Los avatares de dentro son decorativos, el nombre ya está escrito al lado.

Aspecto fino: sin variables propias; usa las del campo (--amset-field-*) y las clases amset-people__option, amset-people__name, amset-people__description y amset-people__tag.

Cómo se ve

Asignar a

Marta Ruiz

<PeoplePicker
  label="Asignar a"
  people={personas}
  placeholder="Busca a alguien del equipo"
  byPresence
  initialValue={["marta"]}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`people`obligatoria	`readonly Person[]`	—
`allowsCreate`	`boolean`	Permite crear valores que no estan en la lista (etiquetas libres).
`byPresence`	`boolean`	Ordena por presencia (conectados primero) y despues por nombre. Con `false`, el orden en que llegan.
`checklist`	`boolean`	Modo casillas: la lista sigue enseñando lo elegido con su marca, pulsar una ya elegida la quita y el panel se queda abierto para marcar varias seguidas. Al llegar a `max`, las que faltan por marcar se apagan en vez de desaparecer.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Ni se escribe, ni se abre la lista, ni se quitan fichas: todo sale del orden del Tab.
`error`	`string`	—
`exclude`	`readonly string[]`	Claves que no se ofrecen: quien ya esta en el grupo, quien se esta invitando a si mismo.
`hint`	`string`	—
`initialValue`	`readonly string[]`	—
`invalid`	`boolean`	Marca el campo como no valido. Lo normal es pasar `error`, que ademas lo explica.
`limitTags`	`number`	Cuantas fichas se ven con el campo en reposo; el resto se resume en «+N» y salen todas al entrar en el campo. Sin esto se ven todas, y la caja crece en lineas cuando no caben.
`loading`	`boolean`	Las opciones estan llegando. Marca el campo como ocupado, enseña un anillo y una fila `loadingText` en la lista; las opciones que ya hubiera se quedan.
`loadingText`	`string`	Lo que dice la fila de carga. Por defecto, «Cargando…».
`max`	`number`	Cuantas se pueden elegir como mucho.
`maxVisibleOptions`	`number`	Tope de opciones pintadas a la vez en listas muy largas (miles). El resto no se pinta: la lista avisa de cuantas se ven y que se escriba para acotar. Sin esto se pintan todas.
`name`	`string`	Con este nombre viaja lo elegido en un formulario nativo: un campo oculto por clave (`name=a&name=b`), como un `<select multiple>`.
`noResultsMessage`	`string`	—
`offset`	`number`	—
`onChange`	`(keys: readonly string[]) => void`	—
`onType`	`(text: string) => void`	—
`placeholder`	`string`	—
`placement`	`Placement`	—
`readOnly`	`boolean`	Lo elegido se ve y el campo se enfoca, pero no se añade ni se quita nada: las fichas pierden su boton de quitar.
`removeText`	`(label: string) => string`	El nombre entero del boton de quitar cada ficha: «Quitar Anillos» por defecto. Es todo el nombre; no se le pega nada detras.
`required`	`boolean`	—
`serverFiltered`	`boolean`	La lista ya llega filtrada de fuera (busqueda en el servidor).
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`readonly string[]`	Claves elegidas. Si se pasa, el estado lo lleva quien use el componente.
`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: