@porsche-design-system/components-react/esm/lib/components/select.wrapper.d.ts

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.

import type { BaseProps } from '../../BaseProps';
import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectToggleEventDetail, SelectState } from '../types';
export type PSelectProps = BaseProps & {
    /**
     * Reduces the control height and padding for use in dense layouts where vertical space is limited.
     * @default false
     */
    compact?: boolean;
    /**
     * Sets a supplementary description displayed below the label to give users additional guidance about the select.
     * @default ''
     */
    description?: string;
    /**
     * Prevents user interaction with the select and excludes its value from form submissions.
     * @default false
     */
    disabled?: boolean;
    /**
     * Controls whether the dropdown list opens upward (`up`) or downward (`down`), or determines the direction automatically (`auto`).
     * @default 'auto'
     */
    dropdownDirection?: SelectDropdownDirection;
    /**
     * Shows a text input inside the dropdown that filters the visible options as the user types. Ignored when the `filter` slot is used.
     * @default false
     */
    filter?: boolean;
    /**
     * Associates the select with a form element by its ID when it is not a direct descendant of that form.
     */
    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 select control to identify its purpose.
     * @default ''
     */
    label?: string;
    /**
     * Sets the validation feedback message displayed below the select when `state` is `success` or `error`.
     * @default ''
     */
    message?: string;
    /**
     * Sets the name of the control submitted with the form data, identifying the selected value on the server.
     */
    name: string;
    /**
     * Emitted when the select component loses focus, useful for triggering validation on blur.
     */
    onBlur?: (event: CustomEvent<void>) => void;
    /**
     * Emitted when the user selects a different option, carrying the new value in the event detail.
     */
    onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
    /**
     * Emitted when the dropdown list opens or closes, carrying the new `isOpen` state in the event detail.
     */
    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
    /**
     * Marks the select as required so the form cannot be submitted unless a non-empty option is selected.
     * @default false
     */
    required?: boolean;
    /**
     * Sets the validation state of the select, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
     * @default 'none'
     */
    state?: SelectState;
    /**
     * The selected value. Matches an option strictly by type and value, meaning null matches only an option with value null, undefined matches only an option with value undefined (no preselection by default), and string or number only match an option whose value has the same type and equal value.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
     */
    value?: string | number | null;
};
export declare const PSelect: 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"> & {
    /**
     * Reduces the control height and padding for use in dense layouts where vertical space is limited.
     * @default false
     */
    compact?: boolean;
    /**
     * Sets a supplementary description displayed below the label to give users additional guidance about the select.
     * @default ''
     */
    description?: string;
    /**
     * Prevents user interaction with the select and excludes its value from form submissions.
     * @default false
     */
    disabled?: boolean;
    /**
     * Controls whether the dropdown list opens upward (`up`) or downward (`down`), or determines the direction automatically (`auto`).
     * @default 'auto'
     */
    dropdownDirection?: SelectDropdownDirection;
    /**
     * Shows a text input inside the dropdown that filters the visible options as the user types. Ignored when the `filter` slot is used.
     * @default false
     */
    filter?: boolean;
    /**
     * Associates the select with a form element by its ID when it is not a direct descendant of that form.
     */
    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 select control to identify its purpose.
     * @default ''
     */
    label?: string;
    /**
     * Sets the validation feedback message displayed below the select when `state` is `success` or `error`.
     * @default ''
     */
    message?: string;
    /**
     * Sets the name of the control submitted with the form data, identifying the selected value on the server.
     */
    name: string;
    /**
     * Emitted when the select component loses focus, useful for triggering validation on blur.
     */
    onBlur?: (event: CustomEvent<void>) => void;
    /**
     * Emitted when the user selects a different option, carrying the new value in the event detail.
     */
    onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
    /**
     * Emitted when the dropdown list opens or closes, carrying the new `isOpen` state in the event detail.
     */
    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
    /**
     * Marks the select as required so the form cannot be submitted unless a non-empty option is selected.
     * @default false
     */
    required?: boolean;
    /**
     * Sets the validation state of the select, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
     * @default 'none'
     */
    state?: SelectState;
    /**
     * The selected value. Matches an option strictly by type and value, meaning null matches only an option with value null, undefined matches only an option with value undefined (no preselection by default), and string or number only match an option whose value has the same type and equal value.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
     */
    value?: string | number | null;
} & {
    children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;