Package
v4.x
Description
Allow splitting up input to improve readability or consistency - depending on how a brand prefers to present the code.
The delimiter could just be a space, or a specific character. For example, instead of 123456, show 123 456, 123-456, or 123•456, with some way to adjust the styling and spacing with the delimiter.
Shopify Shop example:
Slack uses a format like AB3-4DE.
Additional context
Currently, I managed to hack this together by wiring two sets of PinInput together, but there are many edge cases with continuity, paste, and potential autofill concerns.
Side note: Most robust implementations will help strip out bad characters like spaces, delimiters, or illegal characters so that only the numbers (or alphanumeric) get filled. There's also a juggling act of trying to preserve the best compatibility across operating systems for automatic copy/paste/fill from email vs SMS. It seems like it's more common to avoid delimiters on that end, but you can still show it while you type them in.
Package
v4.x
Description
Allow splitting up input to improve readability or consistency - depending on how a brand prefers to present the code.
The delimiter could just be a space, or a specific character. For example, instead of 123456, show 123 456, 123-456, or 123•456, with some way to adjust the styling and spacing with the delimiter.
Shopify Shop example:
Slack uses a format like AB3-4DE.
Additional context
Currently, I managed to hack this together by wiring two sets of
PinInputtogether, but there are many edge cases with continuity, paste, and potential autofill concerns.Side note: Most robust implementations will help strip out bad characters like spaces, delimiters, or illegal characters so that only the numbers (or alphanumeric) get filled. There's also a juggling act of trying to preserve the best compatibility across operating systems for automatic copy/paste/fill from email vs SMS. It seems like it's more common to avoid delimiters on that end, but you can still show it while you type them in.