Todos los componentes (204)
Controles pegados
Acciones · CompactGroup
Qué es y cuándo usarlo
Un campo con su botón, o varios campos, pegados sin huecos y con las esquinas de unión cuadradas: el buscador con «Buscar», el cupón con «Aplicar», un prefijo con su número. Los campos ocupan lo que sobra y los botones, lo suyo.
Cuándo usarlo
- Una acción que va con UN campo y se entiende junta: buscar, aplicar un cupón, añadir.
Cuándo no
- Solo botones: es
ButtonGroup, que hace lo mismo. - Un campo con un prefijo que es parte del valor (un teléfono):
PhoneFieldya lo trae.
Los campos de dentro llevan hiddenLabel. Con la etiqueta a la vista, la caja baja debajo del texto y deja de alinear con el botón. La etiqueta se sigue anunciando y el grupo lleva su propio nombre. La ayuda y el error salen debajo sin mover a los demás.
Teclado: Tab recorre los controles, como si estuvieran sueltos. Accesibilidad: role="group" y label obligatoria.
Aspecto fino: hereda el de cada campo y botón. El pegado se hace quitando el radio interior y solapando un borde, no con gap: 0, que dejaría la raya del medio del doble de gruesa.
Cómo se ve
<CompactGroup label="Buscar clientes">
<TextField label="Buscar" hiddenLabel placeholder="Nombre o correo" />
<Button variant="solid">Buscar</Button>
</CompactGroup>Props
Se importa con import { CompactGroup } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | Los controles pegados: campos y botones, en el orden en que se ven. |
labelobligatoria | string | Como se llama el grupo: «Buscar clientes». Sin el, el lector de pantalla nombra los controles sueltos y se pierde que van juntos. |
className | string | Se une a las clases de la biblioteca, no las sustituye. |
orientation | "horizontal" | "vertical" | — |
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: