MaskedValue

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The last four characters show; the eye toggle reveals the value, and Copy copies all of it.

••••••••••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>
  );
}

Fixed length and auto hide

maskLength hides the length of the value; hideAfter masks a revealed value again after five seconds.

7Q••••••••6CHidden value ending in 6C

LightDark

Copy code

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

export default function Fixed() {
  return (
    <Provider locale="en-GB">
      <MaskedValue value="7Q2K-9X4M-1B6C" label="Recovery code" visibleStart={2} visibleEnd={2} maskLength={8} hideAfter={5000} />
    </Provider>
  );
}

Light and dark mode

The text and toggle use the default colours.

Light

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

Dark

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

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>
  );
}