YearPickerInput

Input component that opens YearPicker inside a modal dialog. Ideal for settings where only the year matters (fiscal periods, graduation year, etc.) while keeping the UI aligned with the rest of our picker inputs.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽¹⁾

Properties

⁽⁶¹⁾

Playground

Basic

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
YearPickerInput
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<YearPickerInput
        
value
=
{
value
}
        
onChange
=
{
setValue
}
        
label
=
"Fiscal year"
        
placeholder
=
"Select a year"
        clearable
        fullWidth
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value 
?
 
`Selected: ${value.getFullYear()}`
 
:
 
'No year selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap