YearPicker

Grid-based selector for choosing a year within a configurable range. Supports responsive layouts, decade navigation, and min/max constraints for simplified year selection flows.

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
,
 
YearPicker
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
new
 
Date
(
)
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<YearPicker
 
value
=
{
value
}
 
onChange
=
{
setValue
}
 
totalYears
=
{
20
}
 
/>
      
<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