Porsche Design System

Input Week

Table of Contents

Props
Events
Slots
CSS Variables

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

autoComplete

auto-complete

Provides the browser with a week/year autofill hint.

string

undefined

compact

Reduces the input height and padding for a more compact layout.

boolean

false

description

Sets a supplementary description displayed below the label to provide additional context.

string

''

disabled

Disables the field, preventing week selection. The value is not submitted with the form.

boolean

false

form

Associates the field with a form element by its ID when the field is not nested directly inside it.

string

undefined

hideLabel 🛠

hide-label

Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

label

Sets the visible label text displayed above the input field.

string

''

loading 🧪

loading

experimental Disables the field and displays a loading spinner to indicate an ongoing operation.

boolean

false

max

Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.

string

undefined

message

Sets the validation feedback message displayed below the field when state is success or error.

string

''

min

Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.

string

undefined

name

Sets the name submitted with the form data to identify this field's value on the server.

string

undefined

readOnly

read-only

Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.

boolean

false

required

Marks the field as required — form submission is blocked while no week is selected.

boolean

false

state

Sets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).

type InputWeekState =
'none'
'error'
'success'

'none'

step

Sets the stepping interval in weeks.

number

1

value

Sets the current ISO week value in YYYY-Www format (e.g. 2025-W27).

string
'null'

''

Events

Event

Description

Type

blur

Emitted when the input loses focus, regardless of whether the value changed.

type InputWeekBlurEventDetail = Event
CustomEvent<InputWeekBlurEventDetail>

change

Emitted when the input loses focus after its value was changed.

type InputWeekChangeEventDetail = Event
CustomEvent<InputWeekChangeEventDetail>

input

Emitted on every value change as the user interacts with the week picker.

type InputWeekInputEventDetail = InputEvent
CustomEvent<InputWeekInputEventDetail>

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<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 Variables

CSS Variable

Description

defaultValue

--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.