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 Number 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='postal-code').stringundefinedcompact compactReduces the input height and padding for a more compact layout.booleanfalsecontrols controlsShows increment/decrement spin buttons inside the field to adjust the numeric value by clicking.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.booleanfalsemax maxSets the maximum allowed numeric value. Values above this are invalid.numberundefinedmessage messageSets the validation feedback message displayed below the field when state is success or error.string''min minSets the minimum allowed numeric value. Values below this are invalid.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. 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 InputNumberState =
'none'
'error'
'success''none'step stepSets the stepping granularity — the value must be a multiple of this number. Also controls step button increment size.number1value valueSets the current numeric value of the field.string
number
'null'''EventsEventDescriptionTypeblur Emitted when the number input has lost focus.type InputNumberBlurEventDetail = Event
CustomEvent<InputNumberBlurEventDetail>change Emitted when the number input loses focus after its value was changed.type InputNumberChangeEventDetail = Event
CustomEvent<InputNumberChangeEventDetail>input Emitted when the value has been changed as a direct result of a user action.type InputNumberInputEventDetail = InputEvent
CustomEvent<InputNumberInputEventDetail>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%