Todos los componentes (204)

Chip alternable

Elección · ToggleChip · .amset-chip

Qué es y cuándo usarlo

Un chip que se activa y se apaga: un filtro, una capa, una categoría. Es un <button aria-pressed>, así que el teclado, el foco y el lector de pantalla son los del navegador. Cada chip puede llevar su propio color, que es lo que lo distingue de SegmentedGroup, donde todas las opciones comparten la caja y el acento.

Cuándo usarlo

Filtros de una lista que se activan y se apagan por separado (estados, carpetas, etiquetas), sobre todo si cada uno tiene su color o su recuento.
Capas de un mapa o de un calendario que se enseñan u ocultan.
Una elección exclusiva con chips de colores: el consumidor gobierna selected de cada uno para que solo haya uno activo.
color para el color de cada chip, count para el recuento («Todas 12») e icon para un dibujo delante.
Varios juntos van dentro de ToggleChipGroup (Grupo de chips), que les pone nombre y el mismo hueco.

Cuándo no

Elegir UNA opción entre pocas con la misma caja y el mismo acento: SegmentedGroup.
Elegir una entre varias que necesitan enseñarse (un tema, un plan): OptionCard dentro de RadioGroup.
Los valores ya elegidos que se pueden quitar (destinatarios, filtros puestos): Tag con onRemove o AppliedFilters.
Una opción de un formulario que viaja con él: Checkbox o Switch.

Teclado: cada chip es una parada de Tab. Intro y Espacio lo activan y lo apagan. Apagado (disabled) no se enfoca.

Accesibilidad: lleva aria-pressed, así que se anuncia «pulsado» o «no pulsado»; el recuento forma parte del nombre («Todas 12») y el icono es decorativo. El color solo no basta, así que al activarse también cambia la forma: el fondo se rellena, el borde se engruesa y aparece una marca de verificación (withCheck, por defecto sí). El color del texto activado es el del chip mezclado con la tinta; quien elige los colores es quien responde de que alcancen 4,5:1 sobre su fondo. En una pantalla táctil mide al menos 44 px de alto.

Aspecto fino: el color se pone con color o con la variable --amset-chip-color (cualquier color CSS, también desde una clase): de ella salen el borde, el fondo suave y la tinta. El resto, en variables --amset-chip-*: -height, -padding, -gap, -font, -icon y -radius (var(--amset-radius-sm) da chips cuadrados).

Cómo se ve

Filtrando por 1 de 4.

<ToggleChipGroup label="Carpetas">
  <ToggleChip count={4} color="oklch(0.7 0.14 152)" selected={activa} onChange={setActiva}>
    Casa
  </ToggleChip>
  <ToggleChip count={12} color="oklch(0.68 0.15 250)">Trabajo</ToggleChip>
</ToggleChipGroup>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	Lo que se lee y se ve: es el nombre del chip para el lector de pantalla.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`color`	`string`	El color del chip: cualquier color CSS. Pinta el borde, el fondo suave y la tinta al activarse. Es la variable `--amset-chip-color`, puesta por `style`.
`count`	`string \| number`	Un recuento detras del texto («Todas 12»): se lee como parte del nombre.
`defaultSelected`	`boolean`	Si esta activado al empezar, gobernandose por dentro.
`disabled`	`boolean`	—
`icon`	`ReactNode`	Un icono delante del texto (decorativo: el nombre lo pone el texto).
`onChange`	`(selected: boolean) => void`	Se avisa con el valor NUEVO: `true` al activarlo, `false` al apagarlo.
`selected`	`boolean`	Si esta activado, gobernado desde fuera.
`size`	`"sm" \| "md" \| "lg"`	Alto de 24, 28 o 36 px.
`withCheck`	`boolean`	Enseña una marca de verificación al activarse, además del color.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-chip-color`	`var(--amset-accent)`
`--amset-chip-height`	`1.75rem`
`--amset-chip-padding`	`var(--amset-space-3)`
`--amset-chip-gap`	`var(--amset-space-1)`
`--amset-chip-font`	`var(--amset-text-sm)`
`--amset-chip-icon`	`0.875rem`
`--amset-chip-radius`	`999px`
`--amset-chip-border`	`color-mix(in oklab, var(--amset-chip-color) 40%, transparent)`
`--amset-chip-background`	`transparent`
`--amset-chip-text`	`var(--amset-ink-2)`
`--amset-chip-ink-share`	`30%`

Cómo se cambia

.amset-chip {
  --amset-chip-color: ...;
  --amset-chip-height: ...;
}

En el banco de pruebas

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