A pin input is akin to a text field component but is specifically optimized for swiftly entering sequences of digits.
Core Components & Variants
Pin Input
| Core |
|
|
| Property Name |
Property Type |
Property Value |
| State |
Variant |
Default |
| Hover |
|
|
| Focus |
|
|
| Filled |
|
|
| State |
Variant |
Enabled |
| Error |
|
|
| Disabled |
|
|
Examples
Best Practices
- 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.
- 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