Counter type='number' type='password' type='password' without password toggle button type='search' type='search' with locate action type='search' with locate action and loading Slots
maxlength attribute is present on the input element, a counter will be displayed in the corner.
To hide it you can set showCounter to false.
showCharacterCount property has been deprecated and will be removed with the next major release.Please use the
showCounter property instead.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label">
<input type="text" name="some-name" value="Some value" maxlength="20" />
</p-text-field-wrapper>
<p-text-field-wrapper label="Some label" show-counter="false">
<input type="text" name="some-name" value="Some value" maxlength="20" />
</p-text-field-wrapper>
<script>
</script>
</body>
</html>type="number" can display a unit (e.g. €, EUR, km/h, etc.) with a maximum of five characters. A
description of the used unit should be provided to ensure accessibility.The price in Euro
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label" description="The price in Euro" unit="EUR" unit-position="prefix">
<input type="number" name="some-name" value="500" />
</p-text-field-wrapper>
<script>
</script>
</body>
</html>type="password" receive a toggle button to display the input's value in clear text.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label">
<input type="password" name="some-name" value="some password" />
</p-text-field-wrapper>
<script>
</script>
</body>
</html>showPasswordToggle="false".showPasswordToggle prop is experimental and might be removed in a future release.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label" show-password-toggle="false">
<input type="password" name="some-name" value="some password" />
</p-text-field-wrapper>
<script>
</script>
</body>
</html>type="search" receive a decorative search icon when used outside a form.
Only if used inside a form, a submit button becomes visible which can be hidden using submitButton="false". If the
input contains a value, a clear button shows up.
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label">
<input type="search" name="some-name" />
</p-text-field-wrapper>
<form>
<p-text-field-wrapper label="Some label" submit-button="true">
<input type="search" name="some-name" />
</p-text-field-wrapper>
</form>
<script>
</script>
</body>
</html>type="search" that also have the actionIcon="locate" property always show an action button, no matter if
used within or outside a form.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label" action-icon="locate">
<input type="search" name="some-name" />
</p-text-field-wrapper>
<form>
<p-text-field-wrapper label="Some label" action-icon="locate">
<input type="search" name="some-name" />
</p-text-field-wrapper>
</form>
<script>
</script>
</body>
</html>actionIcon="locate" it is possible to put the component into a loading state via actionLoading="true".<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Some label" action-icon="locate" action-loading="true">
<input type="search" name="some-name" />
</p-text-field-wrapper>
<form>
<p-text-field-wrapper label="Some label" action-icon="locate" action-loading="true">
<input type="search" name="some-name" />
</p-text-field-wrapper>
</form>
<script>
</script>
</body>
</html><!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Search location" hide-label="true" action-icon="locate">
<input type="search" />
</p-text-field-wrapper>
<p-text>Value: </p-text>
<script>
const textFieldWrapper = document.querySelector('p-text-field-wrapper');
const input = document.querySelector('input');
const text = document.querySelector('p-text');
const setInputPlaceholder = (active) => (input.placeholder = active ? 'Locating...' : '');
textFieldWrapper.addEventListener('action', (e) => {
e.target.actionLoading = true;
setInputPlaceholder(true);
// simulate async request
setTimeout(() => {
input.value = 'Stuttgart, Baden-Württemberg';
text.innerText = 'Value: ' + input.value;
e.target.actionLoading = false;
setInputPlaceholder(false);
}, 3000);
});
input.addEventListener('input', (e) => {
text.innerText = 'Value: ' + e.target.value;
if (textFieldWrapper.actionLoading) {
textFieldWrapper.actionLoading = false;
setInputPlaceholder(false);
}
});
</script>
</body>
</html>label, description or message.
Therefore a named slot can be used. Make sure not to define the corresponding property on the host element when a
named slot is used (because a property definition is preferred over a named slot). For named slots only
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper state="error">
<span slot="label" id="some-label-id">
Some label with a
<a href="https://designsystem.porsche.com">
link
</a>
.
</span>
<span slot="description" id="some-description-id">
Some description with a
<a href="https://designsystem.porsche.com">
link
</a>
.
</span>
<input type="text" name="some-name" aria-labelledby="some-label-id" aria-describedby="some-description-id some-message-id" />
<span slot="message" id="some-message-id">
Some error message with a
<a href="https://designsystem.porsche.com">
link
</a>
.
</span>
</p-text-field-wrapper>
<script>
</script>
</body>
</html>