Skip to main content

MaskedField

MaskedField — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

MaskedField — Prism component.

Accessibility

Masked values stay obscured to assistive tech until revealed; the reveal toggle is a labelled button. Audit entries are an ordered list.

Import

const { MaskedField } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
valuestring | numberYesThe sensitive value to display (string or number).
labelReact.ReactNodeOptional caption above the value.
visibleCharsnumberHow many trailing characters stay visible when masked. Default 4.
maskCharstringCharacter used for the mask. Default "•".
revealablebooleanShow the reveal/hide toggle. Default true.
copyablebooleanShow a copy-to-clipboard button. Default false.
defaultRevealedbooleanStart revealed. Default false.
classNamestring