YearField

YearField renders an <input type="number"> constrained to year values. It emits a number (not a string) via onChange. Optional minYear and maxYear props limit the selectable range, and step controls the increment amount.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | number | No | — | Currently selected year as a number. | | onChange | (value: number) => void | Yes | — | Called with the new year as a number when the user changes the value. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | minYear | number | No | — | Minimum selectable year. | | maxYear | number | No | — | Maximum selectable year. | | step | number | No | 1 | Increment/decrement amount per step. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

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="Year"
      value={year}
      onChange={setYear}
    />
  );
}

With min and max year

<YearField
  label="Fiscal year"
  value={fiscalYear}
  onChange={setFiscalYear}
  minYear={2000}
  maxYear={2030}
  description="Select a year between 2000 and 2030."
/>