A fixed-format code with a set prefix: an invoice number, an account code, a membership number.
PrefixedInput is the TextInput box with a fixed prefix segment set into its left end ("INV", "ACC-") and a counter at the right. The prefix is part of the box, never typed. charset is digits (the default) or alphanumeric, upper-cased as typed.
It normalises whatever is pasted or autofilled (with or without the prefix, spaces or dashes) and reports both the full code and the body after the prefix. Leaving it part-filled marks it invalid; an empty field is left to the form's required check.
Installation
npx shadcn@latest add KezLahd/rime/prefixed-inputAlso installs: base, field, icon, text-input.
Usage
import { Field, PrefixedInput } from "@/components/ui";
<Field label="Invoice number">
<PrefixedInput prefix="INV" length={6} value={code} onValueChange={(full) => setCode(full)} />
</Field>Examples
Digits
Letters and numbers
Letters and numbers, as printed on your statement.
Switchable prefix (phone)
Australian mobile, landline, 1300, 13 or 1800.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
PrefixedInput
| Prop | Type | Default | Description |
|---|---|---|---|
| prefix | string | The fixed segment set into the box and never typed: "INV", "ACC", "#". Omit when passing prefixOptions; the selected option's value takes over. | |
| length | number | How many characters follow the prefix. Omit when passing prefixOptions; each option carries its own length. | |
| charset | PrefixedFormat["charset"] | "digits" | digits = 0-9 only (the default). alphanumeric = A-Z and 0-9, upper-cased as typed. |
| prefixOptions | ReadonlyArray<PrefixedOption> | A list of switchable prefix choices, each with its own length (and charset). The prefix slot becomes a dropdown button; pasting a full code picks the matching option automatically. The first option is the default. For a single hardcoded prefix, use prefix + length instead. | |
| prefixValue | string | Controlled: which option is active. onPrefixChange fires when it changes. | |
| onPrefixChange | (value: string, option: PrefixedOption) => void | ||
| valueRequired | string | The full code ("INV004213") or the body alone; either is read. | |
| onValueChangeRequired | (code: string, body: string) => void | Every edit. `code` is the full form ("" while nothing is entered, never a bare prefix); `body` is what follows the prefix. | |
| invalid | boolean | Overrides the Field's invalid state and the built-in check on blur. | |
| showCounter | boolean | true | The "4/6" count at the right of the box. On by default. |
| boxClassName | string | Class for the outer box rather than the <input>. |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes, InputHTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --field-focus-border | rgba(var(--rgb-brand), 0.7) / var(--focus-color) | … |
| --field-focus-ring | var(--focus-halo) | … |
| --field-focus-ring-invalid | 0 0 0 4px rgba(var(--rgb-danger), 0.14) | … |
| --field-hover-border | rgba(var(--rgb-brand-deep), 0.3) | … |
| --input-bg | var(--surface-solid) | … |
| --input-border | var(--line-input) | … |
| --input-border-width | var(--border-w-field) | … |
| --input-font-size | var(--text-input) | … |
| --input-height-md | var(--field-h-md) | … |
| --input-height-sm | var(--field-h-sm) | … |
| --input-pad-x | calc(14px * var(--density)) | … |
| --input-radius | var(--r-md) / var(--r-sm) | … |
| --input-shadow | var(--shadow-input) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w-field | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-field-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-line | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --field-h-md | tokens.css | … |
| --field-h-sm | tokens.css | … |
| --focus-color | tokens.css | … |
| --focus-halo | tokens.css | … |
| --font-body | tokens.css | … |
| --font-mono | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-placeholder | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line | tokens.css | … |
| --line-input | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --recess-fill | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-float | tokens.css | … |
| --shadow-input | tokens.css | … |
| --success-ink | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-input | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-hover | tokens.css | … |
| --wash-subtle | tokens.css | … |
| --z-popover | tokens.css | … |
Accessibility
- Wrap it in <Field label=…>: Field wires the label, hint and error to the control (id, aria-describedby, aria-invalid) through context, so the control needs no ids of its own.
- The prefix and the expected length are read out through a visually hidden description tied to the input.
- A refused key shows a short note in the counter and announces it politely, so a refusal is never silent.
- In switchable-prefix mode the dropdown is a listbox: arrow keys move between options, Enter picks, Escape closes and returns focus to the trigger.
Do and don't
Do
- Validate the full code on the server too.
- Use it only where the format is truly fixed.
- Reach for prefixOptions when the user must pick from a small set of fixed-length formats (phone type, country code, SKU family).
Don't
- Don't use it for free text that merely starts with a word; use TextInput with a leading adornment.
- Don't put >5 options in the prefix dropdown; use a Combobox or a dedicated phone-country picker instead.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open prefixed-input.mdRelated: text-input