Formularios

NumberField

Números con botones a los lados o al final, límites, prefijo y sufijo, y formato según el idioma para moneda, porcentaje y unidades. Mismas variantes y tamaños que TextField.

import { NumberField } from '@alea/ui';

Ejemplos

Campo numérico

Botones de paso, límites y pasos con el teclado.

Seats

Formatos

Moneda, porcentaje y unidades, según el idioma y región de la persona.

Price

Discount

File size

Botones al final y unidades

stepperPosition="end" pone flechas pequeñas a la derecha; prefix y suffix agregan un signo o una unidad.

Width

Discount

Quantity

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

top

side

showStepper: false

showStepper: true

end

sides

filled

outline

underline

borderless

Label PositionlabelPosition
Show SteppershowStepper
Sizesize
Stepper PositionstepperPosition
Variantvariant

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Disabled

Invalid

Read Only

Required

Claro

Habilitado

Hover

Foco

Presionado

Disabled

Invalid

Read Only

Required

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…

Radius

--alea-radius-full…

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

`NumberField` props

Ver 19 props heredadas

Un input numérico con botones de paso, min, max, step y formato según el idioma y región (moneda, porcentaje, unidades).

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.
`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.
`prefix`	`ReactNode`	-	Ícono o texto antes del valor (un signo de moneda cuando no usas formatOptions).
`showOptional`	`boolean`	-	Muestra "(opcional)" después de la etiqueta.
`showStepper`	`boolean`	`true`	Muestra los botones − y +. Por defecto true.
`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' }.
`stepperPosition`	`"end" \| "sides"`	`'sides'`	sides: − a la izquierda y + a la derecha (por defecto); end: pequeñas flechas arriba y abajo a la derecha.
`suffix`	`ReactNode`	-	Ícono o texto después del valor (una unidad).
`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