p-input-search can be integrated into a form in two ways: controlled or uncontrolled, depending on your
needs.value property and input event to
keep it in sync with your application logic. This approach is ideal for complex forms or when using a form library. Note
that the component will still always update its internal value automatically when interacted with.<input type="search" />, automatically
manages its own state, and includes its value in form submissions through the
Form section in the
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<form class="flex flex-col gap-fluid-sm">
<p-input-search name="myInputSearch" label="Some Label" indicator clear></p-input-search>
<div class="flex gap-fluid-sm">
<p-button type="submit">Submit</p-button>
<p-button type="reset">Reset</p-button>
</div>
<p-text>Last submitted data: </p-text>
</form>
<script>
const debugElement = document.querySelector('p-text');
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
debugElement.innerText = `Last submitted data: ${formData.get('myInputSearch')}`;
});
</script>
</body>
</html>label, description or message need markup such as a link. Do not set the corresponding
host property at the same time, because properties take precedence. Named slots only accept
label, description and message, you can also use label-after for content that should appear after the
label but is not part of the label itself, such as an external link or popover.start and end slots. For
example, you might include an icon, a unit, or an action button. Icons and text should use the contrast-medium color
to avoid being mistaken for a button.p-button-pure or a p-link-pure, a padding and margin have to be set with the exposed
--ref-p-input-slotted-padding and --ref-p-input-slotted-margin CSS Variables.Attention
disabled/loading state, slotted focusable UI elements (e.g. a) will still receive
keyboard focus. Add tabindex="-1" to those UI elements. The label-after slot is not affected
by a disabled/loading state at all.
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-input-search state="error">
<span slot="label">
Some label with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
and a "label-after" slot.
</span>
<p-popover slot="label-after">
Some Popover content with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
.
</p-popover>
<span slot="description">
Some description with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
.
</span>
<p-icon slot="start" name="pin" color="contrast-medium" aria-hidden="true"></p-icon>
<p-button-pure slot="end" icon="locate" hide-label="true" class="p-(--ref-p-input-slotted-padding) m-(--ref-p-input-slotted-margin)" aria="{'aria-label': 'Locate'}"></p-button-pure>
<span slot="message">
Some error message with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
.
</span>
</p-input-search>
<script>
</script>
</body>
</html>aria property to expose extra semantics on the native input (see
aria values and shows a non-interactive listbox-shaped panel (Tailwind only) for visual context.
If you use aria-controls to reference a light-DOM listbox from the native input inside Shadow DOM, be aware that
assistive technologies may not reliably honor that cross-shadow relationship. This issue is known and will be resolved
if browsers add support for it. A real implementation still needs your logic, keyboard handling, and relationship
attributes that work for your setup per the 
718
911
Cayenne
Macan
Panamera
Taycan
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<div class="flex w-full max-w-md flex-col gap-static-xs self-start [&>p-input-search]:min-w-0">
<p-input-search label="Search" name="aria-sketch" indicator="true" clear="true" aria="{'role': 'combobox', 'aria-expanded': 'true', 'aria-haspopup': 'listbox', 'aria-autocomplete': 'list', 'aria-controls': 'listbox'}"></p-input-search>
<div id="listbox" role="listbox" tab-index="0" aria-label="Search options" class="max-h-48 p-static-sm overflow-y-auto rounded-xl border-thin border-contrast-lower bg-background-base shadow-md ">
<div role="option" aria-selected="false" class="px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
718
</div>
<div role="option" aria-selected="false" class="px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
911
</div>
<div role="option" aria-selected="true" class="flex px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
<span>
Cayenne
</span>
<p-icon name="check" color="primary" aria-hidden="true" class="ms-auto"></p-icon>
</div>
<div role="option" aria-selected="false" class="px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
Macan
</div>
<div role="option" aria-selected="false" class="px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
Panamera
</div>
<div role="option" aria-selected="false" class="px-static-sm py-static-sm cursor-pointer bg-background-base hover:bg-frosted transition-colors duration-300 rounded-sm">
Taycan
</div>
</div>
</div>
<script>
</script>
</body>
</html>