Componentes de Bootstrap

Grupo de entrada

Un campo con algo acoplado: un prefijo, un sufijo, una unidad, un botón o un selector, dibujado como un solo control.

Un grupo de entrada une un campo con un complemento para que se lean como uno. Así se construye el buscador de una barra de herramientas: un campo con su botón Buscar.

Cuándo usarlo

Úsalo

Un complemento de texto corto para una unidad o un prefijo (@, %, €).
Un botón para la acción del campo (Buscar, Aplicar).
Un grupo por campo; el grupo es el control, así que la etiqueta pertenece al campo.

No

Apilar tres o más complementos; divide el campo.
Poner un icono suelto como complemento para decorar; los iconos llevan un significado.
Usarlo para unir dos campos sin relación.

Anatomía

Un grupo tiene el campo y uno o dos complementos (texto, botón o selector) a los lados. El complemento comparte el borde y la altura del campo.

Variantes y estados

Complementos: texto, botón y selector

Tamaños

Pequeño, normal y grande

Small

Default

Large

Combinaciones

Combinación	Para qué usarla
Complemento de texto	Una unidad o un prefijo (`@`, `%`, `€`) a cualquier lado del campo.
Complemento de botón	La acción del campo (Buscar, Aplicar) a la derecha. La etiqueta pertenece al campo.
Complemento de selector	Una elección que califica el valor («Ocultar
Tamaño	Todo el grupo toma un tamaño (`input-group-sm`, `input-group-lg`); nunca mezcles tamaños dentro.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El complemento comparte borde, altura y radio con el campo	Se lee como un solo control: el usuario no se pregunta dónde acaba el campo.
Los complementos tienen un fondo gris discreto	Lo que destaca es el valor; la unidad es contexto.
El botón dentro de un grupo es recto en las uniones y redondeado en el extremo	Sigue al campo en vez de ser una píldora pegada a un rectángulo.

Clases

Clase	Qué hace
`input-group`	Envuelve el campo y sus complementos
`input-group-text`	Un complemento de texto
`input-group-prepend`, `input-group-append`(sin envoltorio)	Dónde va un complemento
`input-group-sm`, `input-group-lg`	Más pequeño y más grande

En esta versión

Bootstrap 5.3 dibuja el foco como un anillo suave y guarda cada color en variables CSS (--bs-*), así que un tema recolorea un control con una sola variable. Los complementos son hijos directos de input-group.

Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos. Los complementos van envueltos en input-group-prepend o input-group-append.

Accesibilidad

El campo conserva su etiqueta; un complemento visual no la sustituye.
Un botón solo con icono lleva title y aria-label.
El orden de tabulación es el visual: primero el campo, luego el botón.