MonthPickerInput
MonthPickerInput opens a month picker from a form field.
Source
LLM docs
Package
npm install @plocks/datesExamples
2
Properties
71
Playground
Basics
MonthPickerInput opens a month picker from a form field.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { MonthPickerInput } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Block fullWidth>
<MonthPickerInput
value={value}
onChange={setValue}
label="Billing cycle"
placeholder="Select a month"
clearable
fullWidth
/>
<Text size="sm" c="secondary">
{value
? value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
: 'No month selected'}
</Text>
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on MonthPickerInput.
Loading demo…
import { Column } from '@plocks/ui';
import { MonthPickerInput } from '@plocks/dates';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<MonthPickerInput key={variant} variant={variant} label={`${variant} variant`} placeholder="Choose a month" />
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources