React Part Number Builder
Ordering codes like AES-256-P-G-D-I are how hardware actually gets bought — and almost every catalog explains them in a static PDF table. This component does both directions: Build assembles a code from option segments, Decode parses a pasted code back into plain language and flags any segment it does not recognize.
Orderable part number
AES-128-R-C-N-CInstallation
Props
| Prop | Type | Description |
|---|---|---|
| prefix | string | Family prefix, e.g. "AES" |
| segments | PartSegment[] | { id, label, options } in code order |
| separator | string | Joins segments (default "-"); "" packs them together |
| example | string | Prefilled value for decode mode |
Each option is { code, label, desc? }. The code is what appears in the part number; label and desc are what the decoder shows.
How decoding works
With a separator, the input is split on it and each token is matched against the corresponding segment. With separator="" the decoder walks the string left to right, taking the longest matching code at each position — so variable-length codes (128 vs 1) still resolve correctly. Order your segments exactly as they appear in the real part number.
Unrecognized tokens are highlighted rather than silently dropped, which is the point: a customer pasting a code from a five-year-old datasheet finds out immediately that a segment has been superseded.
Pair it with the Product Configurator so the same catalog both generates and explains its codes.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.