PIN Field
Note
A component for collecting PIN codes, security verification codes, or other short sequences of characters with customizable grouping and input masking.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
The PINField component consists of:
- PIN Input Fields - A series of input fields for entering individual characters
- Separators - Optional visual separators between groups of fields
- Focus Indicator - Visual indicator for the currently focused field
- Placeholder - Optional placeholder to indicate empty fields
States
Interaction states
Enabled
The default state of the PINField when it's ready for user input.
Focused
Indicates which field is currently active and ready to receive input. Only one field can be focused at a time.
Disabled
The PINField is not interactive and cannot receive input or focus.
Read-only
The PINField displays its value but cannot be edited.
Value states
Empty
No values have been entered into the fields.
Partially filled
Some, but not all fields have values.
Completely filled
All fields have values.
Invalid
The entered value does not meet the required format or validation rules.
Options
Size
- Small: Compact size for limited space
- Medium: Standard size for typical use cases
Groups
The number of fields can be customized, and they can be organized into visual groups (e.g., 2-2-2 for a 6-digit code like "12-34-56").
Masking
Fields can display the actual characters entered or masked characters (e.g., "•") for sensitive information like PINs.
Placeholder
Custom placeholder characters can be specified for empty fields.
Separator
Custom separator characters can be specified for groups.
Behaviors
- Auto-advances to the next field when a character is entered
- Allows deletion and moving backward through fields
- Optional callback when all fields are filled
- Supports copy/paste of the entire code
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| 2023-05-12 | new | Initial design | Oanh Nguyen | - |