@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.
211 lines (210 loc) • 7.48 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { BreakpointCustomizable, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState } from '../types';
export type PInputTelProps = BaseProps & {
/**
* Provides the browser with a phone number autofill hint (e.g. `autocomplete='tel'`).
*/
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 all input. 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>;
/**
* Shows a phone icon at the start of the field as a visual indicator for telephone input.
* @default false
*/
indicator?: 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 maximum number of characters the user can enter.
*/
maxLength?: number;
/**
* Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the minimum number of characters required for the field to be considered valid.
*/
minLength?: number;
/**
* 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<InputTelBlurEventDetail>) => void;
/**
* Emitted when the input loses focus after its value was changed.
*/
onChange?: (event: CustomEvent<InputTelChangeEventDetail>) => void;
/**
* Emitted on every value change as the user types.
*/
onInput?: (event: CustomEvent<InputTelInputEventDetail>) => void;
/**
* Sets a regular expression the entered value must match to be valid. Overrides the browser's default telephone validation.
*/
pattern?: string;
/**
* Sets placeholder text shown inside the field when it is empty, such as an example phone number format.
* @default ''
*/
placeholder?: string;
/**
* Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
* @default false
*/
readOnly?: boolean;
/**
* Marks the field as required — form submission is blocked while this field is empty.
* @default false
*/
required?: boolean;
/**
* Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
* @default 'none'
*/
state?: InputTelState;
/**
* Sets the current telephone number value of the field.
* @default ''
*/
value?: string | null;
};
export declare const PInputTel: 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 phone number autofill hint (e.g. `autocomplete='tel'`).
*/
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 all input. 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>;
/**
* Shows a phone icon at the start of the field as a visual indicator for telephone input.
* @default false
*/
indicator?: 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 maximum number of characters the user can enter.
*/
maxLength?: number;
/**
* Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the minimum number of characters required for the field to be considered valid.
*/
minLength?: number;
/**
* 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<InputTelBlurEventDetail>) => void;
/**
* Emitted when the input loses focus after its value was changed.
*/
onChange?: (event: CustomEvent<InputTelChangeEventDetail>) => void;
/**
* Emitted on every value change as the user types.
*/
onInput?: (event: CustomEvent<InputTelInputEventDetail>) => void;
/**
* Sets a regular expression the entered value must match to be valid. Overrides the browser's default telephone validation.
*/
pattern?: string;
/**
* Sets placeholder text shown inside the field when it is empty, such as an example phone number format.
* @default ''
*/
placeholder?: string;
/**
* Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
* @default false
*/
readOnly?: boolean;
/**
* Marks the field as required — form submission is blocked while this field is empty.
* @default false
*/
required?: boolean;
/**
* Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
* @default 'none'
*/
state?: InputTelState;
/**
* Sets the current telephone number value of the field.
* @default ''
*/
value?: string | null;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;