MonthYearPicker
Escolhe mês e ano quando o dia não importa, como na competência mensal. O gatilho tem o visual do Select e o valor é sempre AAAA-MM. Na grade, as setas movem entre os meses e PageUp e PageDown trocam o ano.
Com Field
Valor enviado: 2026-09
Escolha o mês da fatura que quer baixar.
Tamanhos e desabilitado
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | — | Mês e ano no formato AAAA-MM, como 2026-09. Outro formato conta como vazio. |
| onValueChange | (value: string) => void | — | Recebe AAAA-MM ao escolher um mês. |
| min / max | string | — | Faixa permitida, inclusive. Meses fora ficam indisponíveis e o ano para nas pontas. |
| placeholder | ReactNode | "Selecione o mês" | Texto do gatilho vazio. |
| locale | string | "pt-BR" | Idioma dos nomes dos meses, via Intl. |
| size | "sm" | "md" | "lg" | "md" | Altura igual à do SelectTrigger. |
| align | "start" | "center" | "end" | "start" | Alinhamento da grade em relação ao gatilho. |
| open / defaultOpen / onOpenChange | boolean / (open) => void | — | Controle de abertura do Popover. |
| contentClassName | string | — | Classe extra da grade. |
const [competence, setCompetence] = useState("2026-09");
<MonthYearPicker
value={competence}
onValueChange={setCompetence}
min="2024-01"
max="2026-10"
aria-label="Competência"
/>