# SecretInput

```tsx
import { SecretInput } from '@tangible/ui';
```

Interactive docs and examples: [SecretInput in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-secretinput--docs).

## 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](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-secretinput--docs)).

## 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`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/forms-secretinput--docs