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 Time 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 time autofill hint.stringundefinedcompact compactReduces the input height and padding for a more compact layout.booleanfalsedescription descriptionSets a supplementary description displayed below the label to provide additional context.string''disabled disabledDisables the field, preventing time selection. 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 latest selectable time in hh:mm or hh:mm:ss format. Times after this are disabled in the picker.stringundefinedmessage messageSets the validation feedback message displayed below the field when state is success or error.string''min minSets the earliest selectable time in hh:mm or hh:mm:ss format. Times before this are disabled in the picker.stringundefinedname nameSets the name submitted with the form data to identify this field's value on the server.stringundefinedreadOnly read-onlyMakes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.booleanfalserequired requiredMarks the field as required — form submission is blocked while no time is selected.booleanfalsestate stateSets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).type InputTimeState =
'none'
'error'
'success''none'step stepSets the stepping interval in seconds. Use 60 for minute-level selection, 1 to also expose seconds.number60value valueSets the current time value in hh:mm or hh:mm:ss format (e.g. 14:00).string
'null'''EventsEventDescriptionTypeblur Emitted when the input loses focus, regardless of whether the value changed.type InputTimeBlurEventDetail = Event
CustomEvent<InputTimeBlurEventDetail>change Emitted when the input loses focus after its value was changed.type InputTimeChangeEventDetail = Event
CustomEvent<InputTimeChangeEventDetail>input Emitted on every value change as the user interacts with the time picker.type InputTimeInputEventDetail = InputEvent
CustomEvent<InputTimeInputEventDetail>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%