import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import image1 from '../../stories/assets/Docum_SDSS_Componentes/04_Campo_numerico/01_Numero_Input.png'; import image2 from '../../stories/assets/Docum_SDSS_Componentes/04_Campo_numerico/02_Numero_Anatomia.png'; import image3 from '../../stories/assets/Docum_SDSS_Componentes/04_Campo_numerico/03_Numero_Estados.png'; # Campo numérico / Number input Es un tipo de campo de información especial donde el dato esperado es una **cifra**. Cierto tipo de datos numéricos que no sean cifras, como por ejemplo una fecha, tienen componentes específicos para introducir la información.

Al ser un tipo específico de **campo de texto**, todas las características de este son de aplicación al campo numérico, manteniendo las siguientes salvedades. El campo numérico tiene apariencia de un campo de texto normal pero permite, además de introducir manualmente el número, afinar el valor introducido con los controles incrementales “+” y “-“ que acompañan al componente. No se recomienda el uso de campos numéricos cuando se esperan números de muchas cifras o con un gran incremento. Funcionan mejor para pequeños incrementos que requieren pocos clics. En estos casos se recomienda usar un campo de texto normal. Se recomienda utilizar un **valor por defecto** cuando se presenta el campo indicando así su formato (comas y puntos) y da una referencia numérica, así como una etiqueta clara y concisa que además indique la unidad del número introducido si se requiere. ### Anatomía La anatomía de este componente es similar a la del campo de texto, a la que se le añaden los **iconos** de los controles incrementales de medida concordante con el texto, esto es 16px. El **padding** de los elementos es el estándar de 16px y se incluye un **separador** de 1px sin padding entre los dos iconos.

### Comportamiento Cada vez que el usuario pulsa en los controles el valor variará de forma **incremental**. Por defecto el valor variará en 1 unidad, pero se puede establecer que los saltos sean cantidades más grandes (10, 100…). Los **estados** del componente son los mismos que los del campo de texto, con la salvedad de que el los estados hover y focus pueden afectar por separado a los distintos elementos (caja o controles incrementales).

### Código ```