SecretInput
import { SecretInput } from '@tangible/ui';
Interactive docs and examples: SecretInput in Storybook.
SecretInput props
| Prop | Type | Default | Description |
|---|---|---|---|
className? |
string |
Additional class name applied to the root wrapper element. | |
defaultRevealed? |
boolean |
false |
Initial reveal state (uncontrolled). |
inputClassName? |
string |
Class name applied directly to the <input> element. Use for utilities like tui-input-reset (removes browser-native search decoration, clear buttons, and spinners) that must target the input itself. |
|
isSet? |
boolean |
false |
A value exists server-side that is deliberately not shown. Renders the set-state treatment while the input is empty. The stored value must never be passed to this component — see the contract above; a dev-only warning fires if it is alongside isSet. Nothing is submitted unless the user types, so an empty submit means "unchanged" and the set-state is an accurate description of what the server still holds (including after the user types and deletes back to empty). |
labels? |
SecretInputLabels |
Overridable label strings for i18n. All keys are optional — defaults are English, and are exported as defaultSecretInputLabels so a consumer can override one key without restating the rest. |
|
locked? |
boolean |
false |
The value is managed outside this UI (a wp-config.php constant, an env var, a policy). Renders read-only with a lock icon and no reveal toggle — there is nothing client-side to reveal. |
lockedMessage? |
string |
Why the field is locked, e.g. "Defined in wp-config.php." Replaces the generic labels.locked sentence as the field's accessible description. |
|
onRevealChange? |
(revealed: boolean) => void |
Called when the reveal toggle is activated, with the new state. | |
revealed? |
boolean |
Reveal state (controlled) — for policies like re-masking on blur. | |
size? |
"lg" | "md" | "sm" |
'md' |
Control size. |
Also accepts the standard attributes of InputHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.
Other exports
defaultSecretInputLabels:Required<SecretInputLabels>
Examples
Stories: Default, Reveal, Value Is Set, Locked, In Field, Sizes, Controlled Reveal (interactive page).
Component API tokens
Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.
--tui-secret-input-set-fg--tui-secret-input-button-radius--tui-secret-input-bg-locked