PIN Field
Preview
index.tsx•
•
•
•
Groups
Preview
index.tsx•
•
-
•
•
-
•
•
Masked
Preview
index.tsxSizes
Preview
index.tsxSmall Size:
•
•
•
•
Medium Size:
•
•
•
•
States
Preview
index.tsxDefault:
•
•
•
•
Invalid:
•
•
•
•
Disabled:
•
•
•
•
Read Only:
•
•
Reset Button:
•
•
•
•
Custom
Preview
index.tsxCustom Separator:
•
•
-
•
•
•
-
•
•
Custom Placeholder:
*
*
*
*
Alternative
Preview
index.tsx•
•
•
•
Groups
Preview
index.tsx•
•
-
•
•
-
•
•
Masked
Preview
index.tsxSizes
Preview
index.tsxSmall Size:
•
•
•
•
Medium Size:
•
•
•
•
States
Preview
index.tsxDefault:
•
•
•
•
Invalid:
•
•
•
•
Disabled:
•
•
•
•
Read Only:
•
•
Reset Button:
•
•
•
•
Custom
Preview
index.tsxCustom Separator:
•
•
-
•
•
•
-
•
•
Custom Placeholder:
*
*
*
*
Design Tokens for PinField
Note: PinField uses the same design tokens as Input. See Input documentation for more details.
PinField API Reference
<PinField />
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | number[] | [4] | Number and grouping of PIN fields (e.g. [2,2,2]) |
| value | string | PIN value (controlled) | |
| onChange | function (value) | Callback when value changes | |
| onComplete | function (value) | Callback when all fields are filled | |
| masked | boolean | false | Mask input characters (password style) |
| separator | string | '-' | Separator character between groups |
| reset | boolean | false | Reset all input fields |
| readOnly | boolean | false | Read-only, cannot edit |
| disabled | boolean | false | Disable all fields |
| invalid | boolean | false | Invalid/error state |
| size | 'sm' | 'md' | 'md' | Field size |
| theme | 'default' | 'alternative' | 'default' | Theme |
| placeholder | string | '•' | Placeholder for empty fields |
| ...HTMLDivProps | HTMLDivElement props | Inherits all props of div |
Note: PinField does not inherit InputProps directly but HTMLDivElement props.