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 Text Table of ContentsPropertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultautoComplete auto-completeProvides the browser with a data type hint to enable relevant autofill suggestions (e.g. autocomplete='name').stringundefinedcompact compactReduces the input height and padding for a more compact layout.booleanfalsecounter counterShows a live character counter below the field indicating how many characters have been entered relative to maxLength.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>falselabel 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, to hint at the expected format.string''readOnly read-onlyMakes the field read-only — the value is displayed but cannot be edited by the user. The value is still submitted with the form.booleanfalserequired requiredMarks the field as required — form submission is blocked while this field is empty.booleanfalsespellCheck spell-checkControls whether the browser's built-in spell-checking is enabled for this field.booleanundefinedstate stateSets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).type InputTextState =
'none'
'error'
'success''none'value valueSets the current text value of the input field.string
number
'null'''EventsEventDescriptionTypeblur Emitted when the input loses focus, regardless of whether the value changed.type InputTextBlurEventDetail = Event
CustomEvent<InputTextBlurEventDetail>change Emitted when the input loses focus after its value was changed.type InputTextChangeEventDetail = Event
CustomEvent<InputTextChangeEventDetail>input Emitted on every value change as the user types.type InputTextInputEventDetail = InputEvent
CustomEvent<InputTextInputEventDetail>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. unit prefix).<slot name="end"> Shows content at the end of the input (e.g. toggle button, unit suffix).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%