Secret Field

Forms · MoneyInput, SecretField

SecretField shows a stored credential without exposing it; MoneyInput takes amounts in the locale's format with a VAT rate.

SecretField: prefix, last4, value (shown only after onReveal resolves truthy; ask for a passkey there), meta, onCopy, onRotate.
MoneyInput: label, value / onChange(number), currency, vat + onVat + vatOptions, showGross, hint, error. Parses and formats with setLocale.

Never render a full secret by default; reveal is a step-up action.
Amounts are right-aligned tabular mono so columns line up.

PreviewCode

sk_live_••••••••4f2aAdded 12 Mar

Amount

€

Gross €1,475.60Net, as on the invoice

Props

MoneyInput

Prop	Type	Notes
`label?`	`string`
`value?`	`number \| null`
`onChange?`	`(v: number \| null) => void`
`currency?`	`string`
`vat?`	`string`
`onVat?`	`(v: string) => void`
`vatOptions?`	`{ value: string; label: string; rate?: number }[]`
`showGross?`	`boolean`
`hint?`	`ReactNode`
`error?`	`ReactNode`
`defaultValue?`	`number \| null`
`required?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

SecretField

Prop	Type	Notes
`prefix?`	`string`
`last4?`	`string`
`value?`	`string`
`meta?`	`ReactNode`
`onReveal?`	`() => boolean \| Promise<boolean>`
`onCopy?`	`() => void`
`onRotate?`	`() => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.