'/%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
SearchField y PasswordField
Un buscador con botón para borrar, una pista de tecla y estado de carga, y un campo de contraseña para mostrar u ocultar con medidor de seguridad. Mismas variantes y tamaños que TextField.
import { SearchField, PasswordField } from '@alea/ui';
Ejemplos
Búsqueda
Aparece un botón de borrar cuando hay texto; Escape también borra.
Type to search
Contraseña
Muestra y oculta el valor. Usa new-password en formularios de registro.
Atajo y carga
shortcut muestra una pista de tecla mientras el campo está vacío (asigna tú la tecla); isLoading cambia el ícono por un spinner mientras cargan los resultados.
Fuerza de la contraseña
showStrength agrega un medidor de cuatro pasos: débil, regular, buena, fuerte. Pasa strength para usar tu propio evaluador.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Label Position
labelPosition - Size
size - Variant
variant
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-family-mono…--alea-font-size-md…--alea-font-size-xs…--alea-font-weight-medium…--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
SearchField props
Un cuadro de búsqueda con un botón de borrar; Escape también lo borra.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
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. |
isLoading | boolean | - | Muestra un spinner en lugar del ícono de búsqueda mientras cargan los resultados. |
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 | - | Texto del placeholder. Por defecto "Buscar". |
shortcut | ReactNode | - | Una pista de teclado mostrada mientras el campo está vacío, como ⌘K o /. Asigna tú la tecla. |
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. |
PasswordField props
Un input de contraseña con un botón para mostrar/ocultar y un medidor de fuerza opcional.
| 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. |
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 (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. |
showStrength | boolean | - | Muestra un medidor de fuerza de cuatro pasos bajo el campo (largo, mayúsculas y minúsculas, dígitos y símbolos). |
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' }. |
strength | ((value: string) => 0 | 2 | 3 | 1) | passwordScore | Tu propia puntuación de 0 (débil) a 3 (fuerte), de tu propio evaluador de contraseñas. |
variant | "filled" | "outline" | "underline" | "borderless" | - | 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.
SearchField
- Variantes
labelPositiontopsidevariantfilledoutlineunderlineborderless- Estados
- Hover (CSS)Focus insideInvalidDisabled
- Motion
- nudgemore
- 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-search-field.alea-input-wrap.alea-input-affix.alea-input.alea-input-ghost.alea-input-kbd- Atributos data
data-warningdata-variant=filleddata-variant=underlinedata-side=startdata-variant=borderlessdata-side=enddata-emptydata-stepper=enddata-stepperdata-stepper=sides
PasswordField
- Variantes
labelPositiontopsidevariantfilledoutlineunderlineborderless- 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-strength.alea-strength-bars- Atributos data
data-score=0data-score=1data-score=2data-score=3
Accesibilidad
- El campo de búsqueda tiene rol searchbox; Escape lo borra.
- El botón de mostrar contraseña dice lo que hará y es un interruptor (aria-pressed).
Teclado
| Tecla | Acción |
|---|---|
| Escape | Borra la búsqueda |
| Enter | Envía la búsqueda (onSubmit) |
Qué hacer y qué evitar
Hacer
- Usa new-password como autoComplete en formularios de registro.
Evitar
- No bloquees pegar en los campos de contraseña.