Masked Input
Overview
Section titled “Overview”MaskedInput renders NaviusMaskedInput, the headless primitive that owns mask parsing
and caret placement, and layers the standard Input Tailwind class set on top. The
wrapper owns its own controlled/uncontrolled value mirror (seeded from DefaultValue,
only adopting Value when the consumer actually supplied it), the same discipline as
ZitsCalendar.
Install
Section titled “Install”navius add masked-input --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<ZitsMaskedInput Mask="(000) 000-0000" @bind-Value="_phone" Placeholder="_" />
@code { private string? _phone;}Parts and props
Section titled “Parts and props”MaskedInput is a single control with no part tree. Mask, Placeholder, Lazy,
Disabled, Invalid, and Attributes pass through to NaviusMaskedInput unchanged.
The styled wrapper adds:
| Prop | Type | Default | Description |
|---|---|---|---|
Value |
string? |
null |
Controlled masked value. Bind with @bind-Value; forwarded to the primitive only when set. |
DefaultValue |
string? |
null |
Uncontrolled initial value. |
Styling surface
Section titled “Styling surface”Attributes on ZitsMaskedInput is forwarded to the rendered input and merged with the
base Input class set via Cn.Merge, with the caller’s classes applied last.
Data attribute hooks
Section titled “Data attribute hooks”| Part | Attribute | Description |
|---|---|---|
| Root | data-invalid |
Present when Invalid is true, emitted by NaviusMaskedInput. |