Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Pin Code Usage The following segment provides instructions for designers and developers regarding the appropriate utilization of this component in various situations. Do: Use description text to explain the purpose or context of the p-pin-code component. Use either 4 or 6 fields in the p-pin-code component based on your specific use case and security requirements. Since only digits can be entered, use for digit codes only. Use type number for numeric input or password for secure input depending on your application's needs. Use the component's built-in support for inline validation. Use consideration when implementing the component's behavior in a loading state to ensure it remains usable and responsive during data retrieval or processing. If the p-pin-code component is isolated e.g. used with only one button use the loading state on the button. This ensures a consistent and intuitive user experience. Don't: Don't make the description text overly complex. Keep it concise and focused on clarifying the component's purpose. Don't use the wrong field type for your use case. Ensure that type number or password aligns with the kind of input expected from users.
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%