API and Development
Secret renders a read-only Input showing a masked value. Default masking repeats bullets for all characters or keeps the last four visible when maskAllCharacters is false. Optional revealable toggles visibility via lead icon; the tail icon copies to clipboard and surfaces snackbar success or error feedback.
| Name | Type | Default | Description |
|---|---|---|---|
copiedLabel | LocalizedMessage | — | Name of the copy button while the value is copied. Announced to assistive technology when it appears. |
copyErrorLabel | LocalizedMessage | — | Name of the copy button when the clipboard refused the value. Announced to assistive technology when it appears. |
copyLabel | LocalizedMessage | — | Accessible name of the copy button. |
label | LocalizedMessage | — | Visible label that names the field. |
value | string | — | The stored secret to mask. Data, not copy, so it is a plain string. While it is masked the string is not in the document; only {@link SecretBaseProps.copyLabel}'s button and a reveal put it anywhere a person can reach. |
className | string | — | Classes on the root. Put overrides in @layer chroma.overrides. |
defaultRevealed | boolean | false | Not defined without revealable.
Whether the value starts shown when uncontrolled. |
hideLabel | LocalizedMessage | — | Not defined without revealable.
Accessible name of the toggle while the value is shown. |
id | string | — | HTML id of the underlying read-only input. A generated id is used when omitted. |
maskAllCharacters | boolean | true | When true, every character is masked. When false, the last four characters stay visible and the rest are masked; a value of four characters or fewer is always fully masked. |
onCopy | ((value: string) => void) | — | Called after the value is on the clipboard. @param value - The value that was copied |
onCopyError | ((error: unknown) => void) | — | Called when neither the Clipboard API nor the fallback could copy the value. @param error - What the clipboard rejected with, or an error describing the failed fallback |
onRevealedChange | ((revealed: boolean, details: ChangeDetails<ChangeReason>) => void) | — | Not defined without revealable.
Called when a person presses the reveal toggle. Cancel the change to keep the previous state.
@param revealed - Next state
@param details - Change metadata |
revealable | boolean | false | Whether the value can be revealed. Without it the field shows the mask only and offers copy. Adds a reveal toggle at the inline end of the field, before the copy button. |
revealed | boolean | — | Not defined without revealable.
Whether the value is shown (controlled). |
revealLabel | LocalizedMessage | — | Not defined without revealable.
Accessible name of the toggle while the value is masked. It names the action, so it differs from {@link SecretRevealableProps.hideLabel}. |
size | InputSize | InputSize.Large | Control scale of the field and its buttons, from the shared control heights. |
Toaster in the shell so copy feedback works without nesting another manager.