Usage

Default

Mask sensitive text with the default mask character (•).

<script setup lang="ts">
import CLMaskedText from '@codeandfunction/callaloo/CLMaskedText';
</script>

<template>
  <CLMaskedText value="super-sensitive-content" />
</template>

Mask Formats

Use the maskFormat prop to apply semantic masking rules that preserve helpful context while protecting PII.

<script setup lang="ts">
import CLMaskedText from '@codeandfunction/callaloo/CLMaskedText';
import { CLMaskFormat } from '@codeandfunction/callaloo';
</script>

<template>
  <CLMaskedText :mask-format="CLMaskFormat.Card" value="4532 8920 1928 4242" />
  <CLMaskedText :mask-format="CLMaskFormat.Email" value="[email protected]" />
  <CLMaskedText :mask-format="CLMaskFormat.Phone" value="+1 (555) 123-4567" />
  <CLMaskedText :mask-format="CLMaskFormat.Ssn" value="123-45-6789" />
  <CLMaskedText :mask-format="CLMaskFormat.Sin" value="123-456-789" />
  <CLMaskedText :mask-format="CLMaskFormat.BankAccount" value="9876543210" />
  <CLMaskedText :mask-format="CLMaskFormat.Iban" value="DE89370400440532013000" />
  <CLMaskedText :mask-format="CLMaskFormat.Token" value="ghp_a1b2c3d4e5f6g7h8i9j0k1l2" />
</template>

Revealable Toggle

Set revealable to true to display a toggle button allowing users to reveal and hide the sensitive content.

<script setup lang="ts">
import CLMaskedText from '@codeandfunction/callaloo/CLMaskedText';
import { CLMaskFormat } from '@codeandfunction/callaloo';
</script>

<template>
  <CLMaskedText
    :mask-format="CLMaskFormat.Card"
    revealable
    value="4532 8920 1928 4242" />
</template>

Custom Mask Character

Use the maskChar prop to customize the masking character.

<script setup lang="ts">
import CLMaskedText from '@codeandfunction/callaloo/CLMaskedText';
</script>

<template>
  <CLMaskedText mask-char="*" value="super-sensitive-content" />
</template>

Monospace Override

By default, card numbers, bank accounts, SSN, SIN, IBAN, and tokens automatically use a monospace font. Use the monospace prop to override this behavior explicitly.

<script setup lang="ts">
import CLMaskedText from '@codeandfunction/callaloo/CLMaskedText';
import { CLMaskFormat } from '@codeandfunction/callaloo';
</script>

<template>
  <CLMaskedText :monospace="false" :mask-format="CLMaskFormat.Card" value="4532 8920 1928 4242" />
  <CLMaskedText :monospace="true" value="super-sensitive-content" />
</template>

Props