@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
193 lines (192 loc) • 6.91 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { BreakpointCustomizable, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState } from '../types';
export type PInputMonthProps = BaseProps & {
/**
* Provides the browser with a month/year autofill hint.
*/
autoComplete?: string;
/**
* Reduces the input height and padding for a more compact layout.
* @default false
*/
compact?: boolean;
/**
* Sets a supplementary description displayed below the label to provide additional context.
* @default ''
*/
description?: string;
/**
* Disables the field, preventing month selection. The value is not submitted with the form.
* @default false
*/
disabled?: boolean;
/**
* Associates the field with a form element by its ID when the field is not nested directly inside it.
*/
form?: string;
/**
* Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/**
* Sets the visible label text displayed above the input field.
* @default ''
*/
label?: string;
/**
* @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
* @default false
*/
loading?: boolean;
/**
* Sets the latest selectable month in YYYY-MM format. Months after this are disabled in the picker.
*/
max?: string;
/**
* Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the earliest selectable month in YYYY-MM format. Months before this are disabled in the picker.
*/
min?: string;
/**
* Sets the name submitted with the form data to identify this field's value on the server.
*/
name: string;
/**
* Emitted when the input loses focus, regardless of whether the value changed.
*/
onBlur?: (event: CustomEvent<InputMonthBlurEventDetail>) => void;
/**
* Emitted when the input loses focus after its value was changed.
*/
onChange?: (event: CustomEvent<InputMonthChangeEventDetail>) => void;
/**
* Emitted on every value change as the user interacts with the month picker.
*/
onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => void;
/**
* Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
* @default false
*/
readOnly?: boolean;
/**
* Marks the field as required — form submission is blocked while no month is selected.
* @default false
*/
required?: boolean;
/**
* Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
* @default 'none'
*/
state?: InputMonthState;
/**
* Sets the stepping interval in months (e.g. `1` for monthly, `12` for annual).
* @default 1
*/
step?: number;
/**
* Sets the current month value in YYYY-MM format (e.g. `2025-07`).
* @default ''
*/
value?: string | null;
};
export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
/**
* Provides the browser with a month/year autofill hint.
*/
autoComplete?: string;
/**
* Reduces the input height and padding for a more compact layout.
* @default false
*/
compact?: boolean;
/**
* Sets a supplementary description displayed below the label to provide additional context.
* @default ''
*/
description?: string;
/**
* Disables the field, preventing month selection. The value is not submitted with the form.
* @default false
*/
disabled?: boolean;
/**
* Associates the field with a form element by its ID when the field is not nested directly inside it.
*/
form?: string;
/**
* Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/**
* Sets the visible label text displayed above the input field.
* @default ''
*/
label?: string;
/**
* @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
* @default false
*/
loading?: boolean;
/**
* Sets the latest selectable month in YYYY-MM format. Months after this are disabled in the picker.
*/
max?: string;
/**
* Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the earliest selectable month in YYYY-MM format. Months before this are disabled in the picker.
*/
min?: string;
/**
* Sets the name submitted with the form data to identify this field's value on the server.
*/
name: string;
/**
* Emitted when the input loses focus, regardless of whether the value changed.
*/
onBlur?: (event: CustomEvent<InputMonthBlurEventDetail>) => void;
/**
* Emitted when the input loses focus after its value was changed.
*/
onChange?: (event: CustomEvent<InputMonthChangeEventDetail>) => void;
/**
* Emitted on every value change as the user interacts with the month picker.
*/
onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => void;
/**
* Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
* @default false
*/
readOnly?: boolean;
/**
* Marks the field as required — form submission is blocked while no month is selected.
* @default false
*/
required?: boolean;
/**
* Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
* @default 'none'
*/
state?: InputMonthState;
/**
* Sets the stepping interval in months (e.g. `1` for monthly, `12` for annual).
* @default 1
*/
step?: number;
/**
* Sets the current month value in YYYY-MM format (e.g. `2025-07`).
* @default ''
*/
value?: string | null;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;