NameInput

Borders · src/components/NameInput/NameInput.tsx

One field for a person's name.

One, not two. A first/last pair is a decision about whose names are well formed: it breaks for a mononym, for anyone whose family name comes first, for names with more than two parts, and for anyone who does not split their name the way the form expects. A single field accepts all of them.

second offers the name in the person's own script, kept as written and used where the document is in that script - not a transliteration to be corrected. preferred is what the product should call them, which is often neither of the above.

maxLength is 120 rather than something tighter, because a real name can be long and a form that truncates one is telling its owner their name is wrong.

Import

import { NameInput } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
id	string
label	React.ReactNode
hint	React.ReactNode
size	'sm' | 'md' | 'lg'
value	NameValue
error	Partial<Record<keyof NameValue, React.ReactNode>>	Per-part errors, keyed the same way as the value.
required	boolean	false makes the full name optional. It is required by default.
disabled	boolean
second	boolean	Offer a second field for the name in the person's own script.
secondLabel	React.ReactNode
secondHint	React.ReactNode
preferred	boolean	Offer a preferred name, which is what the product then uses.
preferredLabel	React.ReactNode
preferredHint	React.ReactNode
className	string
onChange	(value: NameValue, key: keyof NameValue) => void

Exported types

NameValue