Porsche Design System

Pin Code

Table of Contents

Props
Events
Slots

Properties

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

Property

Attribute

Description

Type

Default

compact

Reduces the pin code field height and spacing for use in dense layouts where vertical space is limited.

boolean

false

description

Sets a supplementary description displayed below the label to give users additional guidance about the pin code.

string

''

disabled

Prevents user interaction with all pin code fields and blocks events while the component is disabled.

boolean

false

form

Associates the pin code with a form element by its ID when it is not a direct descendant of that form.

string

undefined

hideLabel 🛠

hide-label

Hides the visible label and description while keeping them accessible to screen readers. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

label

Sets the visible label text displayed above the pin code fields to identify their purpose.

string

''

length

Sets the number of individual input fields rendered, determining how many characters the pin code consists of.

type PinCodeLength =
1
2
3
4
5
6

4

loading

Disables the pin code fields and shows a loading spinner to indicate an ongoing background operation.

boolean

false

message

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

string

''

name

Sets the name of the control submitted with the form data to identify the pin code value on the server.

string

undefined

required

Marks the pin code as required so the form cannot be submitted until all fields are filled.

boolean

false

state

Sets the validation state of the pin code, which controls its visual appearance and feedback message style (none, success, error).

type PinCodeState =
'none'
'error'
'success'

'none'

type

Controls whether the individual input fields mask their content as password dots (password) or show digits (number).

type PinCodeType =
number
'password'

'number'

value

Sets the current concatenated value of all pin code fields and allows setting the initial value.

string

''

Events

Event

Description

Type

blur

Emitted when the pin code component loses focus after the user finishes entering characters.

CustomEvent<void>

change

Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail.

type PinCodeChangeEventDetail = { 
  value: string; 
  isComplete: boolean;
}
CustomEvent<PinCodeChangeEventDetail>

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.