SGUI / Development
YearPicker
Four-column scrolling year choices, with optional pagination or typed entry.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Four-column scrolling year choices, with optional pagination or typed entry.
Loading examples…
Loading examples…
Loading examples…
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {YearPicker} from '@structured-growth/sg-ui/experimental';
export default function YearPickerExampleExample() {
const [value,setValue]=useState<number|null>(2026);
return (
<>
<ThemeScope density="comfortable">
<YearPicker referenceYear={2026} minYear={1900} maxYear={2030} yearNavigation="scroll" yearsPerPage={12} yearEntry="select" label={"Year choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {YearPicker} from '@structured-growth/sg-ui/experimental';
export default function YearPickerExampleExample() {
const [value,setValue]=useState<number|null>(2026);
return (
<>
<ThemeScope density="compact">
<YearPicker referenceYear={2026} minYear={1900} maxYear={2030} yearNavigation="scroll" yearsPerPage={12} yearEntry="select" label={"Year choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {YearPicker} from '@structured-growth/sg-ui/experimental';
export default function YearPickerExampleExample() {
const [value,setValue]=useState<number|null>(2026);
return (
<>
<ThemeScope density="comfortable">
<YearPicker referenceYear={2026} minYear={1900} maxYear={2030} yearNavigation="scroll" yearsPerPage={12} yearEntry="select" label={"Year choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {YearPicker} from '@structured-growth/sg-ui/experimental';
export default function YearPickerExampleExample() {
const [value,setValue]=useState<number|null>(2026);
return (
<>
<ThemeScope density="compact">
<YearPicker referenceYear={2026} minYear={1900} maxYear={2030} yearNavigation="paged" yearsPerPage={12} yearEntry="select" label={"Year choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {YearPicker} from '@structured-growth/sg-ui/experimental';
export default function YearPickerExampleExample() {
const [value,setValue]=useState<number|null>(2026);
return (
<>
<ThemeScope density="comfortable">
<YearPicker referenceYear={2026} minYear={1900} maxYear={2030} yearNavigation="paged" yearsPerPage={12} yearEntry="select" label={"Year choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}