Componentes · Buscador y acciones
Grupo de entrada (campo + acción)
Compone un campo con uno o más controles relacionados para búsquedas, filtros, dominios o acciones contextuales.
Buscador
Une el término con su acción de envío.
Continuo
Campo y acción comparten un contorno enlazado, sin radios en la unión.
Accesible
Admite label visible u oculto y mantiene el orden de teclado.
Código + resultado
Buscador compuesto
La etiqueta sigue siendo necesaria aunque visualmente se oculte.
<div class="q-input-group">\n <label class="sr-only" for="project-search">Buscar proyecto</label>\n <input class="q-input" id="project-search" type="search" placeholder="Buscar proyecto">\n <button class="btn btn-primary" type="button">Buscar</button>\n</div>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-input-group | Contenedor flexible. | Agrupa campos y acciones como una sola unidad visual. |
.q-input | Campo principal con radios izquierdos. | Ocupa el ancho restante y queda recto junto a la acción. |
.q-select | Selector principal alternativo. | Puede reemplazar al input y conserva la misma unión. |
.btn / .btn-ico | Acción con radios derechos. | Mantiene ancho automático y elimina los radios del lado unido. |
.sr-only | Etiqueta sólo para lectores. | Úsala cuando el contexto visual sea suficiente. |
Recomendaciones
Buenas prácticas de Grupo de entrada
Una intención
Agrupa sólo controles que resuelven la misma tarea.
Label disponible
No uses placeholder como único nombre del campo.
Botón explícito
La acción debe indicar Buscar, Aplicar o Añadir.