YearField

YearField renderiza un <input type="number"> restringido a valores de año. Emite un number (no un string) via onChange. Las props opcionales minYear y maxYear limitan el rango seleccionable, y step controla el incremento.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | number | No | — | Año seleccionado actualmente como número. | | onChange | (value: number) => void | Sí | — | Llamado con el nuevo año como número cuando el usuario cambia el valor. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | minYear | number | No | — | Año mínimo seleccionable. | | maxYear | number | No | — | Año máximo seleccionable. | | step | number | No | 1 | Cantidad de incremento/decremento por paso. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import YearField from '@/components/fields/YearField';

export default function Example() {
  const [year, setYear] = useState(new Date().getFullYear());

  return (
    <YearField
      label="Año"
      value={year}
      onChange={setYear}
    />
  );
}

Con año mínimo y máximo

<YearField
  label="Año fiscal"
  value={fiscalYear}
  onChange={setFiscalYear}
  minYear={2000}
  maxYear={2030}
  description="Seleccioná un año entre 2000 y 2030."
/>