Pin Code Table of Contents

• Props
• Events
• Slots

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactDisplays the pin code in compact mode.booleanfalsedescription descriptionSupplementary text providing more context or explanation for the pin code.string''disabled disabledDisables the Pin Code. No events will be triggered while disabled state is active.booleanfalseform formThe id of a form element the pin-code should be associated with.stringundefinedhideLabel 🛠hide-labelShows or hides the label and description. For better accessibility, it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falselabel labelText content for a user-facing label.string''length lengthNumber of characters of the Pin Code.type PinCodeLength =
1
2
3
4
5
64loading loadingDisables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.booleanfalsemessage messageThe message styled depending on validation state.string''name nameName of the control.stringundefinedrequired requiredMarks the Pin Code as required.booleanfalsestate stateThe validation state.type PinCodeState =
'none'
'error'
'success''none'type typePin Code type.type PinCodeType =
number
'password''number'value valueSets the initial value of the Pin Code.string''EventsEventDescriptionTypeblur Emitted when the pin-code has lost focus.CustomEvent<void>change Emitted when the input is changed.type PinCodeChangeEventDetail = {
  value: string;
  isComplete: boolean;
}
CustomEvent<PinCodeChangeEventDetail>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.