Prepared Docs

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.

Props

Name	Type	Default	Description
`value`	`string`	—	The sensitive value to mask and optionally reveal.
`id`	`string`	—	HTML `id` attribute for the underlying input element.
`label`	`string`	—	Text label displayed above the secret input.
`labelColor`	`LabelColor`	—	Color variant for the label.
`maskAllCharacters`	`boolean`	`true`	When true, masks all characters. When false, reveals the last 4 characters.
`revealable`	`boolean`	`false`	When true, shows a reveal/hide toggle icon.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Examples

The docs app mounts a single SnackbarManager in the shell so copy feedback works without nesting another manager.

Default

Revealable

Last four visible

Non-revealable

All states

Secret / Usage

Secret / Accessibility

Props

Name	Type	Default	Description
`value`	`string`	—	The sensitive value to mask and optionally reveal.
`id`	`string`	—	HTML `id` attribute for the underlying input element.
`label`	`string`	—	Text label displayed above the secret input.
`labelColor`	`LabelColor`	—	Color variant for the label.
`maskAllCharacters`	`boolean`	`true`	When true, masks all characters. When false, reveals the last 4 characters.
`revealable`	`boolean`	`false`	When true, shows a reveal/hide toggle icon.