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
Textarea 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 hint to enable text autofill suggestions for the textarea (e.g. autocomplete='on').stringundefinedcompact compactReduces the textarea's initial height and padding for use in dense layouts where vertical space is limited.booleanfalsecounter counterShows a live character counter below the textarea indicating how many characters the user has typed relative to maxLength.booleanfalsedescription descriptionSets a supplementary description displayed below the label to give users additional guidance about the textarea.string''disabled disabledPrevents user interaction with the textarea and excludes its value from form submissions.booleanfalseform formAssociates the textarea with a form element by its ID when the textarea is not a direct descendant of that form.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 textarea to identify its purpose.string''maxLength max-lengthSets the maximum number of characters the user is allowed to enter into the textarea.numberundefinedmessage messageSets the validation feedback message displayed below the textarea when state is success or error.string''minLength min-lengthSets the minimum number of characters required for the textarea's value to pass constraint validation.numberundefinedname nameSets the name of the textarea submitted with the form data to identify this field's value on the server.stringundefinedplaceholder placeholderSets placeholder text displayed inside the textarea when it is empty to hint at the expected content format.string''readOnly read-onlyMakes the textarea read-only so users cannot modify the value, while still including it in form submissions.booleanfalserequired requiredMarks the textarea as required so the form cannot be submitted while this field is empty.booleanfalseresize resizeControls whether and in which direction the user can resize the textarea (horizontal, vertical, both, or none).type TextareaResize =
'none'
'both'
'horizontal'
'vertical'
'block'
'inline''vertical'rows rowsSets the initial visible height of the textarea in lines of text. Has no effect when the --p-textarea-field-sizing CSS variable is set to content.number7spellCheck spell-checkControls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content.booleanundefinedstate stateSets the validation state of the textarea, which controls its visual appearance and feedback message style (none, success, error).type TextareaState =
'none'
'error'
'success''none'value valueSets the current multi-line text value of the textarea and reflects any changes made by the user.string
'null'''wrap wrapControls how the submitted text wraps in the form data: soft wraps only visually, hard inserts line breaks at the textarea width.type TextareaWrap =
'hard'
'soft'
'off''soft'EventsEventDescriptionTypeblur Emitted when the textarea element loses focus, regardless of whether the value changed.type TextareaBlurEventDetail = Event
CustomEvent<TextareaBlurEventDetail>change Emitted when the textarea loses focus after its value was changed, equivalent to the native change event.type TextareaChangeEventDetail = Event
CustomEvent<TextareaChangeEventDetail>input Emitted on every keystroke or value change as a direct result of user interaction, equivalent to the native input event.type TextareaInputEventDetail = InputEvent
CustomEvent<TextareaInputEventDetail>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.CSS VariablesCSS VariableDescriptiondefaultValue--p-textarea-field-sizing Controls CSS `field-sizing` for textarea.unset--p-textarea-min-width Minimum width of the textarea.52px--p-textarea-max-width Maximum width of the textarea.unset--p-textarea-min-height Minimum height of the textarea.unset--p-textarea-max-height Maximum height of the textarea.unset
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%