SGUI / Development
MonthPicker
Inline month choices shared by calendar navigation and period selection.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Inline month choices shared by calendar navigation and period selection.
Loading examples…
Loading examples…
Loading examples…
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
export default function MonthPickerExampleExample() {
const [value,setValue]=useState<number|null>(10);
return (
<>
<ThemeScope density="comfortable">
<MonthPicker year={2026} label={"Month 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 {MonthPicker} from '@structured-growth/sg-ui/experimental';
export default function MonthPickerExampleExample() {
const [value,setValue]=useState<number|null>(10);
return (
<>
<ThemeScope density="compact">
<MonthPicker year={2026} label={"Month 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 {MonthPicker} from '@structured-growth/sg-ui/experimental';
export default function MonthPickerExampleExample() {
const [value,setValue]=useState<number|null>(10);
return (
<>
<ThemeScope density="comfortable">
<MonthPicker year={2026} label={"Month choices"} disabled={false} readOnly={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:"20rem",maxInlineSize:'100%',blockSize:"calc(6 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 7 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:"20rem",maxInlineSize:'100%',blockSize:"calc(4 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 5 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:"32rem",maxInlineSize:'100%',blockSize:"calc(2 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 3 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:"20rem",maxInlineSize:'100%',blockSize:"calc(6 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 7 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:"20rem",maxInlineSize:'100%',blockSize:"calc(4 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 5 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}
The grid prefers two columns and six rows when they fit. Shorter hosts use more columns while preserving month labels and interaction targets. Resize the host to see the grid adapt; selecting a month does not resize it.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {MonthPicker} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ResponsiveMonthsExample() {
const [month,setMonth]=useState<number|null>(10);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:"32rem",maxInlineSize:'100%',blockSize:"calc(2 * max(var(--sgui-control-height), var(--sgui-control-minimum-target-size)) + 3 * var(--sgui-space1))",resize:'both',overflow:'auto'}}>
<MonthPicker year={2026} value={month} onValueChange={setMonth}/>
</Box>
</ThemeScope>
</>
);
}