'/%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
TextField
Campo de texto con la etiqueta arriba o al lado, ayuda, advertencia y error, prefijo, sufijo y anexos, un botón para borrar, un contador de caracteres y un indicador de carga. Cuatro variantes y cinco tamaños que pueden cambiar por breakpoint. TextArea para textos largos, que crece si quieres.
import { TextField, TextArea } from '@alea/ui';
Ejemplos
Campo de texto
Una etiqueta, texto de ayuda y un placeholder que es solo un ejemplo.
Validación
Campos obligatorios y tus propias reglas. El error aparece después de usar el campo, y al enviar.
Prefijo, sufijo y tamaños
Texto o íconos dentro del campo.
TextArea
Texto más largo. autoGrow crece con el contenido hasta maxRows.
Variantes
outline (por defecto), filled (con tinte, sin borde hasta el hover), underline y borderless para editar en línea.
Tamaños
xs 28 px, sm 32 px, md 44 px (por defecto), lg 48 px, xl 56 px. El texto y el padding crecen con la altura.
Anexos, borrar y carga
addonStart y addonEnd agregan cajas fuera del input; isClearable agrega un botón de borrar mientras hay texto; isLoading muestra un spinner mientras se verifica un valor.
Contador y advertencia
showCount muestra los caracteres contra maxLength (los lectores de pantalla lo escuchan cuando quedan 10 o menos); warningMessage señala algo que no bloquea.
Etiqueta al costado
labelPosition="side" pone las etiquetas en una columna desde 640 px, para formularios de ajustes largos; en teléfonos vuelven arriba. --alea-label-width define la columna.
Tamaño responsive
size acepta un valor por breakpoint: grande en teléfonos, donde los dedos necesitan espacio, y mediano desde md (768 px).
Responsive
- Los campos ocupan todo el ancho de su contenedor; pon un ancho máximo al formulario, no al campo.
- size acepta un valor por breakpoint: size={{ base: 'lg', md: 'md' }} da más espacio a los dedos en teléfonos.
- labelPosition="side" solo aplica desde 640 px; en teléfonos la etiqueta vuelve arriba para que el campo conserve su ancho.
- Los campos usan texto de 16 px desde md, para que iOS no haga zoom al enfocarlos. xs y sm usan texto más pequeño: evítalos en formularios móviles.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size - Variant
variant - Afijos y anexos
- Ayudas
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
| size | Alto | Ancho | Padding (y · x) | Radio | Tamaño de texto | Icono | Separación |
|---|---|---|---|---|---|---|---|
xs | - | - | - | - | - | - | - |
sm | - | - | - | - | - | - | - |
md | - | - | - | - | - | - | - |
lg | - | - | - | - | - | - | - |
xl | - | - | - | - | - | - | - |
Cada tamaño y espacio es múltiplo de 4 px.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-bg…--alea-border…--alea-border-control…--alea-border-strong…--alea-field-bg…--alea-focus…--alea-focus-halo…--alea-status-danger…--alea-status-danger-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-weight-regular…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…
Component
--alea-input-font…--alea-input-h…--alea-input-pad…--alea-input-radius…
Props
TextField props
Un input de texto de una línea: etiqueta (arriba o al costado), ayuda, advertencia y error, prefijo y sufijo, anexos, un botón de borrar, un contador de caracteres, cuatro variantes y cinco tamaños.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
addonEnd | ReactNode | - | Una caja unida a la derecha, como .com o una unidad. |
addonStart | ReactNode | - | Una caja unida fuera del input a la izquierda, como https://. |
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, o una función del resultado de la validación. Se muestra cuando es inválido. |
isClearable | boolean | - | Muestra un botón de borrar mientras hay texto. |
isLoading | boolean | - | Muestra un spinner al final, para un valor que se está verificando o buscando. |
label | ReactNode | - | La etiqueta visible. Usa aria-label en su lugar solo cuando el contexto lo hace obvio. |
labelPosition | "top" | "side" | 'top' | top (por defecto) o side: la etiqueta va a la izquierda desde 640 px y vuelve arriba en teléfonos. Define la columna de etiquetas con --alea-label-width. |
placeholder | string | - | Un ejemplo de qué escribir; nunca reemplaza a la etiqueta. |
prefix | ReactNode | - | Ícono o texto dentro del campo, antes del valor. |
showCount | boolean | - | Muestra cuántos caracteres hay, y el límite con maxLength. Los lectores de pantalla lo escuchan cuando quedan 10 o menos. |
showOptional | boolean | - | Muestra "(opcional)" después de la etiqueta. |
size | Responsive<"xs" | "sm" | "md" | "lg" | "xl"> | - | xs 28 px, sm 32 px, md 44 px (por defecto), lg 48 px, xl 56 px. Puede cambiar por breakpoint: { base: 'lg', md: 'md' }. |
suffix | ReactNode | - | Ícono o texto dentro del campo, después del valor. |
variant | "filled" | "outline" | "underline" | "borderless" | 'outline' | outline (por defecto), filled (con tinte, sin borde hasta el hover), underline (solo una línea abajo) o borderless (para edición en línea y barras de herramientas). |
warningMessage | ReactNode | - | Una advertencia que no bloquea: el borde se pone ámbar y el texto aparece bajo el campo. |
TextArea props
Texto de varias líneas, que opcionalmente crece con su contenido, con un contador de caracteres.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
autoGrow | boolean | - | Crece con el texto hasta maxRows. |
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, o una función del resultado de la validación. Se muestra cuando es inválido. |
label | ReactNode | - | La etiqueta visible. Usa aria-label en su lugar solo cuando el contexto lo hace obvio. |
labelPosition | "top" | "side" | 'top' | top (por defecto) o side: la etiqueta va a la izquierda desde 640 px y vuelve arriba en teléfonos. Define la columna de etiquetas con --alea-label-width. |
maxRows | number | 12 | Con autoGrow, el máximo de líneas antes de tener scroll. Por defecto 12. |
placeholder | string | - | Un ejemplo de qué escribir. |
resize | "vertical" | "none" | "both" | 'vertical' | En qué dirección se puede arrastrar para cambiar el tamaño: vertical (por defecto), none o both. |
rows | number | 4 | Líneas visibles. Por defecto 4. |
showCount | boolean | - | Muestra cuántos caracteres hay, y el límite con maxLength. |
showOptional | boolean | - | Muestra "(opcional)" después de la etiqueta. |
size | Responsive<"xs" | "sm" | "md" | "lg" | "xl"> | - | xs 28 px, sm 32 px, md 44 px (por defecto), lg 48 px, xl 56 px. Puede cambiar por breakpoint: { base: 'lg', md: 'md' }. |
variant | "filled" | "outline" | "underline" | "borderless" | 'outline' | outline (por defecto), filled (con tinte, sin borde hasta el hover), underline (solo una línea abajo) o borderless (para edición en línea y barras de herramientas). |
warningMessage | ReactNode | - | Una advertencia que no bloquea: el borde se pone ámbar y el texto aparece bajo el campo. |
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.
Size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
States
Oscuro
isInvalid="false" | isInvalid="true" | |
|---|---|---|
isDisabled="false" | Use a valid email. | |
isDisabled="true" | Use a valid email. |
Claro
isInvalid="false" | isInvalid="true" | |
|---|---|---|
isDisabled="false" | Use a valid email. | |
isDisabled="true" | Use a valid email. |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
TextField
- Variantes
labelPositiontopsidevariantfilledoutlineunderlineborderless- Estados
- Hover (CSS)Focus insideInvalidDisabled
- Motion
- nudge
- 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-wrap.alea-input-addon.alea-input-affix.alea-input- Atributos data
data-warningdata-variant=filleddata-variant=underlinedata-side=startdata-variant=borderlessdata-side=enddata-stepper=enddata-stepperdata-stepper=sides
TextArea
- Variantes
labelPositiontopsideresizeverticalnonebothvariantfilledoutlineunderlineborderless- Estados
- Hover (CSS)Focus insideInvalidDisabledHoverFocusKeyboard focus
- Motion
- nudge
- 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-wrap.alea-textarea-wrap.alea-input.alea-textarea- Atributos data
data-warningdata-variant=filleddata-variant=underlinedata-variant=borderlessdata-autogrowdata-stepper=enddata-stepperdata-stepper=sides
Accesibilidad
- La etiqueta, la ayuda, la advertencia y el error están unidos al campo, así que los lectores de pantalla los leen todos.
- Los errores aparecen después de usar el campo o al enviar, y el campo se marca como inválido; un campo inválido con foco conserva el borde rojo y el anillo de foco.
- Los campos obligatorios se marcan con * y como requeridos en el árbol de accesibilidad; el * se oculta a los lectores de pantalla.
- El contador de caracteres se oculta a los lectores de pantalla hasta que quedan 10 o menos, y entonces se anuncia sin interrumpir.
- El botón para borrar se llama Borrar y devuelve el foco al campo.
- Los anexos y prefijos son texto que se lee con el campo; pon unidades en ellos, no instrucciones.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra al campo |
Qué hacer y qué evitar
Hacer
- Muestra siempre una etiqueta visible.
- Di cómo corregir un error: Usa al menos 8 caracteres.
- Usa autoComplete para que los navegadores lo llenen.
Evitar
- No uses el placeholder como etiqueta.
- No valides con cada tecla antes de que la persona termine.
En Figma
Set de campo de texto: Variant (Outline, Filled, Underline, Borderless) × Size (XS a XL) × State (Default, Hover, Focus, Filled, Warning, Invalid, Disabled) con propiedades Label, Help, Error, Prefix, Suffix, Addon y Count.