'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
InputGroup
Une campos, selects y botones en una fila con bordes compartidos: un monto y su moneda, una búsqueda y su botón, un protocolo y un dominio.
import { InputGroup, TextField, Select, Button } from '@alea/ui';
Ejemplos
InputGroup
Controles unidos en una fila: un monto con su moneda, una búsqueda con su botón, un protocolo con un dominio.
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Size
--alea-size-field…
Props
InputGroup props
Une varios controles en una fila con bordes compartidos: monto y moneda, búsqueda y botón, select de prefijo y texto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Campos, selects y botones para unir en un control, como un monto y su moneda, o una búsqueda y su botón. |
aria-label | string | - | Nombre del grupo para lectores de pantalla, cuando no hay etiqueta visible. |
aria-labelledby | string | - | Id de una etiqueta visible para el grupo. |
className | string | - | Clases extra. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Focus insideOpenKeyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-input-group
Accesibilidad
- Un grupo: nómbralo con aria-label o aria-labelledby para que las partes se lean como una.
- Cada control conserva su propia etiqueta (visible o aria-label).
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre los controles en orden |
Qué hacer y qué evitar
Hacer
- Une controles que definen un mismo valor.
Evitar
- No unas campos sin relación solo para ahorrar espacio.