Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Input Search Table of ContentsPropertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultaria ariaSets additional ARIA attributes on the search input, useful for combobox patterns (e.g. role="combobox", aria-expanded).type InputSearchAriaAttribute = {
  'role'?: string;
  'aria-autocomplete'?: string;
  'aria-controls'?: string;
  'aria-expanded'?: string;
  'aria-haspopup'?: string;
  'aria-label'?: string;
}undefinedautoComplete auto-completeProvides the browser with a data type hint to enable relevant autofill suggestions.stringundefinedclear clearShows a clear button (×) inside the field that resets the value to empty when clicked.booleanfalsecompact compactReduces the input height and padding for a more compact layout.booleanfalsedescription descriptionSets a supplementary description displayed below the label to provide additional context.string''disabled disabledDisables the field, preventing all input. The value is not submitted with the form.booleanfalseform formAssociates the field with a form element by its ID when the field is not nested directly inside it.stringundefinedhideLabel 🛠hide-labelHides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.boolean
BreakpointCustomizable<boolean>falseindicator indicatorShows a magnifying glass icon inside the field as a visual affordance for search input.booleanfalselabel labelSets the visible label text displayed above the input field.string''loading 🧪loadingexperimental Disables the field and displays a loading spinner to indicate an ongoing operation.booleanfalsemaxLength max-lengthSets the maximum number of characters the user can enter.numberundefinedmessage messageSets the validation feedback message displayed below the field when state is success or error.string''minLength min-lengthSets the minimum number of characters required for the field to be considered valid.numberundefinedname nameSets the name submitted with the form data to identify this field's value on the server.stringundefinedplaceholder placeholderSets placeholder text shown inside the field when it is empty.string''readOnly read-onlyMakes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.booleanfalserequired requiredMarks the field as required — form submission is blocked while this field is empty.booleanfalsestate stateSets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).type InputSearchState =
'none'
'error'
'success''none'value valueSets the current search query value of the field.string
'null'''EventsEventDescriptionTypeblur Emitted when the input loses focus, regardless of whether the value changed.type InputSearchBlurEventDetail = Event
CustomEvent<InputSearchBlurEventDetail>change Emitted when the input loses focus after its value was changed.type InputSearchChangeEventDetail = Event
CustomEvent<InputSearchChangeEventDetail>input Emitted when the value has been changed as a direct result of a user action.type InputSearchInputEventDetail = InputEvent
CustomEvent<InputSearchInputEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).<slot name="description"> Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="start"> Shows content at the start of the input (e.g. icon).<slot name="end"> Shows content at the end of the input (e.g. search button).CSS VariablesCSS VariableDescriptiondefaultValue--ref-p-input-slotted-padding When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly.--ref-p-input-slotted-margin When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%