MaskedValue

When to use

For values that need not be on screen but are read now and then: an access key, a recovery code, a secret link.

When not to use

• To enter a value: Use PasswordInput for passwords and secret fields.
• For values that must never be shown: Do not send them to the page at all; MaskedValue only hides a value the browser already has.

Anatomy

••••••••••7731Hidden value ending in 7731

LightDark

Copy code

import { MaskedValue, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <MaskedValue value="BB7Q2K9X4M7731" label="Access key" copyable />
    </Provider>
  );
}

1. Value: Only the visible ends while masked; all of it while revealed.
2. Show toggle: An eye icon; its pressed state says the value is shown.
3. Copy (optional): Copies the full value.

Behaviour

• The masked value is not in the page text; screen readers hear only “Hidden value ending in 7731”.
• The show toggle reveals and hides the value; the text cross-fades.
• With hideAfter, a revealed value is masked again after that time.
• It can be controlled with revealed; for example, ask for authentication before revealing.

Guidelines

• Name the value with label; the toggle name stays general (“Show value”).
• If the length is secret too, set maskLength.
• If revealing needs an audit record, log it with onRevealedChange.

Content

Key	TR	EN
ui.masked-value.show	Değeri göster	Show value
ui.masked-value.hidden	Sonu {end} olan gizli değer	Hidden value ending in {end}
ui.masked-value.hidden-all	Gizli değer	Hidden value

Related components

• Copy: Copy only.
• PasswordInput: Secret value entry.