Todos los componentes (204)

Mes y año

Fechas y hora · MonthPicker · .amset-monthpicker

Qué es y cuándo usarlo

Selector de mes y año: un desplegable con los doce meses, escritos en el idioma activo, y un campo de cuatro cifras para el año. El valor es una cadena, 2026-10, que es lo que entiende un <input type="month"> y el servidor.

Cuándo usarlo

Informes, filtros y cierres contables: donde hace falta un mes y no un día.
Solo se avisa (onChange) con un mes y un año enteros, y el año tiene que estar entre minYear y maxYear (por defecto 1900 y 2100).
Con name viaja en un formulario nativo como un único campo.

Cuándo no

Un día concreto: DatePicker. Un periodo de fechas: DateRangePicker.

Teclado: el de Select para el mes y el de un campo de texto para el año, que solo admite cifras.

Accesibilidad: es un fieldset con leyenda; «Mes» y «Año» nombran cada parte. El error del año salta al salir del campo y queda enlazado a él.

Aspecto fino: --amset-monthpicker-gap (hueco entre mes y año), más las variables del campo (--amset-field-*).

Cómo se ve

Caducidad de la tarjeta

Mes

Año

La tarjeta caduca en 2028-04.

<MonthPicker label="Caducidad de la tarjeta" value={mes} onChange={setMes} minYear={2026} maxYear={2040} />

Props

Se importa con import { MonthPicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: nombra el grupo del mes y el año.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`error`	`string`	Error de fuera (del servidor). Manda sobre el que calcula el campo.
`hint`	`string`	—
`initialValue`	`string \| null`	El valor al empezar, sin controlarlo desde fuera.
`maxYear`	`number`	El ultimo año que se acepta. Por defecto, 2100.
`minYear`	`number`	El primer año que se acepta. Por defecto, 1900.
`name`	`string`	Para que viaje en un formulario nativo, como un unico campo.
`onChange`	`(value: string) => void`	Solo se avisa con un mes Y un año enteros: `AAAA-MM`.
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string \| null`	El mes y el año, `AAAA-MM`, controlados desde fuera. `null` es vacio.
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-monthpicker-gap`	`var(--amset-space-3)`

Cómo se cambia

.amset-monthpicker {
  --amset-monthpicker-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: