A pin input is akin to a text field component but is specifically optimized for swiftly entering sequences of digits.

Core Components & Variants

Untitled

Pin Input

Core
Property Name Property Type Property Value
State Variant Default
Hover
Focus
Filled
State Variant Enabled
Error
Disabled

Examples

Untitled

Best Practices

  1. Set the keyboard type to numeric for the PIN input field to ensure users can enter only numeric values. This helps prevent input errors and streamlines the input process.
  2. Define a specific length or character limit for the PIN input and communicate it clearly to the users. This prevents users from entering more or fewer digits than required.

Figma Link

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FyCECl956c0oOr3K8GdXdNe%2FNucleus-Plus%3Ftype%3Ddesign%26node-id%3D14507%3A10720%26mode%3Ddesign%26t%3DYCZdMB0oCV6piJdv-1