YearPickerInput - FormEngine

Package: @react-form-builder/components-mantine · Source code

Introduction

The YearPickerInput component combines an input with a year picker popover. Variants include single year, year range, and multiple years. The component requires @mantine/dates and is based on Mantine YearPicker. It is included within the following NPM package: @react-form-builder/components-mantine.

Components covered

MtYearPickerInput: Single year selection with input.
MtYearRangePickerInput: Year range selection with input.
MtYearMultiplePickerInput: Multiple years selection with input.

Differences between components

Component	Selection type	Value shape	Typical use case
MtYearPickerInput	Single year	`Date \| null`	Single year input (e.g. fiscal year text field)
MtYearRangePickerInput	Year range	`[Date, Date] \| null`	From–to year ranges with an input
MtYearMultiplePickerInput	Multiple years	`Date[]`	Several years managed via input + picker

MtYearPickerInput

Single-year input variant that renders a text field plus picker, allowing users to enter or pick a single year.

MtYearRangePickerInput

Range input for years, combining a textual representation and picker-based selection to define start/end years.

MtYearMultiplePickerInput

Multiple-year input that exposes an array of years as a single form field, editing them via both text input and picker.

Detailed component pages

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Label	`string`	Label for the input
Value	`Date \| null` (or range/multiple)	Selected year(s) (uncontrolled value)
Placeholder	`string`	Placeholder when no selection
Description	`string`	Helper text below the field
Error	`string`	Error message; when set, applies error styling
Size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	Size of the input
Variant	`'filled' \| 'default' \| 'unstyled'`	Visual variant
Disabled	`boolean`	Disables the input
Clearable	`boolean`	If `true`, allows clearing the selection
On change	`event`	Fired when the selection changes

At the bottom of the Main properties menu, you can find additional options:

Render When: Provides conditional rendering for your component as described in the corresponding chapter.
HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

For Device: You can provide component’s style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

Name	Type	Description
Width	`number`	Specifies the width for your component
Height	`number`	Specifies the height for your component
Margin top/right/bottom/left	`number`	Margin values for you component
Color	`string`	Allows customizing the text color
Background color	`string`	Enables customizing the background color

​Introduction

​Components covered

​Differences between components

​MtYearPickerInput

​MtYearRangePickerInput

​MtYearMultiplePickerInput

​Detailed component pages

​Main properties

​Style properties