SecretField
secret-fieldMasks sensitive values while supporting reveal and copy actions.
Usage
Basic usage
The default mask is sk-xxx...xxxx. Click on the eyes to reveal them and click on the copy to get the original value.
sk-han…ab78<SecretField value="sk-hanhub-7f3a9c2e1b8d4056af12cd34ef56ab78" />Full mask
maskStrategy="full" is completely hidden and does not reveal the head and tail structure.
••••••••••••••••<SecretField value={apiKey} maskStrategy="full" />Read only and cannot be copied
Remove the interactive stroke, hide the copy button, and purely display the scene.
sk-han…ab78<SecretField value={apiKey} readOnly copyable={false} />Tail Action Slot
actions slot has a revoke/reset button, side by side with display/copy.
sk-han…ab78<SecretField
value={apiKey}
actions={
<button type="button" className="px-1.5 text-xs text-danger">
Revoked
</button>
}
/>Dimensions
size="sm" fits within dense table rows.
sk-han…ab78<SecretField value={apiKey} size="sm" />When to use
Use SecretField to display an existing API key, token, or secret with masking, reveal, copy, and optional reset or revoke actions. It is for viewing and copying stored secrets, not entering them. Use Input with type="password" for password entry.
For searchable option selection rather than secret display, use Combobox.
Import
import { SecretField, maskSecret } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value * | string | — | Original unmasked secret. |
| revealed | boolean | — | Controlled reveal state; omit for internal state. |
| maskStrategy | "full"|"prefix-suffix" | "prefix-suffix" | full masks everything; prefix-suffix retains the beginning and end. |
| copyable | boolean | true | Whether to display the copy button |
| readOnly | boolean | false | Read-only appearance (remove interactive strokes) |
| size | "sm"|"md" | "md" | — |
| className | string | — | — |
Events
| Event | Type | Description |
|---|---|---|
| onRevealedChange | (revealed: boolean) => void | Called when reveal state changes; use for controlled state. |
| onCopy | (value: string) => void | Called with the original value after copying. |
Slots
| Slot | Type | Description |
|---|---|---|
| actions | ReactNode | Tail action slot (reset/revocation, etc.) |
The exported maskSecret(value, strategy) helper generates a masked string without rendering the component.
Example
<SecretField value={apiKey} maskStrategy="prefix-suffix" />Full masking, no copy action, and controlled reveal:
const [revealed, setRevealed] = useState(false);
<SecretField
value={apiKey}
maskStrategy="full"
copyable={false}
revealed={revealed}
onRevealedChange={setRevealed}
/>Usage guidelines
valuemust be the original plaintext secret. Masking is only a presentation layer, and the original remains available for copying; never pass an already-masked string.- Omit
revealedfor internal state. For externally coordinated reveal behavior, pass bothrevealedandonRevealedChange. copyabledefaults to true. Setcopyable={false}when policy forbids clipboard access.
Related
Show, hide, copy, and copied labels follow ConfigProvider.
Combobox · Listbox · Mentions · InputOTP · Rating · Upload
Playground
sk-han…ab78<SecretField value={apiKey} maskStrategy="prefix-suffix" />