CredentialField

Approval code

CredentialField masks a secret as it's typed. Its companion CredentialOTP renders a segmented one-time-code input, the second factor in SINA's governed approval flows.

Usage

import { CredentialField, CredentialOTP } from "@sina-design-system/core";

<CredentialField label="API key" />
<CredentialOTP length={6} onChange={setCode} />

Examples

CredentialField · masked + reveal toggle

Approval code

That code is incorrect.

Approval code

CredentialOTP · length variants

CredentialOTP · states

Props

Prop	Type	Default	Description
`length`	`number`	`6`	CredentialOTP: the number of digits.
`onChange`	`(value: string) => void`	—	CredentialOTP: fires on every edit with the current value.
`label / description / error`	`ReactNode`	—	Field wiring, as usual.

The value is never echoed in plain text, and like all sensitive fields it's dropped from the audit log by redaction.