@page "/mask"
@page "/docs/guides/components/mask.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Mask
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Mask</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo three masked inputs demonstrate formatting: <strong>Telephone</strong> with <code>Mask="(***) ***-****"</code>, <strong>Credit Card</strong> with <code>Mask="**** **** **** ****"</code>, and <strong>SSN</strong> with <code>Mask="***-**-****"</code>, all using <code>CharacterPattern="[0-9]"</code> to accept only digits and logging changes to the console.
</RadzenText>

<RadzenExample ComponentName="Mask" Example="MaskConfig">
    <MaskConfig />
</RadzenExample>