Number Input

Vista previa

Number Input es un campo numérico con controles de incremento y decremento y formato adaptado a la configuración regional. Implementa el patrón spinbutton de WAI-ARIA.

#Uso

Compón Root, Input, IncrementButton y DecrementButton. Los botones ajustan el valor y Input acepta entradas numéricas escritas.

import * as NumberInput from "@solidiom/number-input"

;<NumberInput.Root>
  <NumberInput.DecrementButton>−</NumberInput.DecrementButton>
  <NumberInput.Input />
  <NumberInput.IncrementButton>+</NumberInput.IncrementButton>
</NumberInput.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/number-input. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

number-input expone 4 partes:

• Root — contenedor que implementa el patrón spinbutton y el formato adaptado a la configuración regional.
• Input — campo de texto numérico.
• IncrementButton — aumenta el valor según el paso.
• DecrementButton — reduce el valor según el paso.

#Estilos

number-input incluye los atributos data-scope="number-input" y data-part en cada parte para seleccionar estilos CSS o recetas.

#Teclado y comportamiento

number-input sigue el patrón spinbutton de WAI-ARIA con formato adaptado a la configuración regional.

#Composición

Compón con primitivos de etiqueta y campo para crear un control numérico etiquetado y validado.

#SSR e hidratación

El campo se renderiza como HTML estático en el servidor; los manejadores de teclado del spinbutton y los botones de incremento/decremento se activan durante la hidratación.

solidiom add number-input