Pin Code Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactA boolean value that, if present, renders the pin-code as a compact version.booleanfalsedescription descriptionThe description text.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-labelShow or hide label and description text. For better accessibility it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falselabel labelThe label text.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'theme themeAdapts the color depending on the theme.type Theme =
'light'
'dark'
'auto''light'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>update 🚫deprecated since v3.30.0, will be removed with next major release, use change event instead. Emitted when the input is changed.type PinCodeUpdateEventDetail = {
  value: string;
  isComplete: boolean;
}
CustomEvent<PinCodeUpdateEventDetail>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="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.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto