Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Grupo de chips

Elección · ToggleChipGroup

Qué es y cuándo usarlo

Varios ToggleChip juntos, con un nombre para el conjunto. Les da a todos el mismo hueco y salta de línea cuando no caben, en vez de salirse del ancho.

Cuándo usarlo

  • Los filtros de una lista que se activan por separado (carpetas, estados, etiquetas): el grupo les pone nombre, «Carpetas», y los coloca.
  • label es obligatoria: es lo que el lector anuncia al entrar en el grupo. Cada chip se gobierna por su cuenta, con su selected o su defaultSelected: el grupo no guarda ningún estado.

Cuándo no

  • Elegir UNA opción entre pocas con la misma caja y el mismo acento: SegmentedGroup. Una entre varias que necesitan enseñarse: OptionCard dentro de RadioGroup.
  • Los valores ya elegidos que se pueden quitar (destinatarios, filtros puestos): Tag con onRemove o AppliedFilters.
  • Un solo chip: no necesita grupo.

Teclado: el grupo no añade teclas propias. Cada chip es una parada de Tab y se alterna con Intro o Espacio; un chip apagado no se enfoca.

Accesibilidad: es un role="group" con label como nombre accesible, así que el lector anuncia el grupo por su nombre al entrar, y cada chip se anuncia «pulsado» o «no pulsado». No es una lista de opciones excluyentes: activar uno no apaga los demás, y así lo dice el papel de cada chip (aria-pressed).

Aspecto fino: --amset-chip-group-gap, la separación entre chips (--amset-space-2, por defecto). Lo de cada chip, en las --amset-chip-* de su ficha.

Cómo se ve

Etiquetada como: Urgente.

<ToggleChipGroup label="Etiquetas de la incidencia">
  <ToggleChip selected={urgente} onChange={setUrgente}>Urgente</ToggleChip>
  <ToggleChip selected={facturacion} onChange={setFacturacion}>Facturación</ToggleChip>
  <ToggleChip selected={envios} onChange={setEnvios}>Envíos</ToggleChip>
</ToggleChipGroup>

Props

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

PropTipoPara qué sirve
childrenobligatoriaReactNode—
labelobligatoriastringEl nombre del grupo para el lector de pantalla («Carpetas», «Capas»).
classNamestringSe une a las clases de la biblioteca, no las sustituye.

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: