Currency Input

Overview

CurrencyInput renders NaviusCurrencyInput, the headless primitive that owns the decimal? truth and NumberFormatInfo formatting, and layers the standard Input Tailwind class set on top, including a data-[negative] treatment. 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. The culture’s currency symbol renders inline in the value; there is no separate adornment slot.

Install

navius add currency-input --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsCurrencyInput @bind-Value="_amount" Currency="USD" />

@code {
    private decimal? _amount;
}

Parts and props

CurrencyInput is a single control with no part tree. Culture, Currency, MinFractionDigits, MaxFractionDigits, AllowNegative, Min, Max, ShowSymbol, Disabled, Invalid, and Attributes pass through to NaviusCurrencyInput unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Value	decimal?	null	Controlled value. Bind with @bind-Value; forwarded to the primitive only when set.
DefaultValue	decimal?	null	Uncontrolled initial value.

Styling surface

Attributes on ZitsCurrencyInput 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

Part	Attribute	Description
Root	data-invalid	Present when Invalid is true, emitted by NaviusCurrencyInput.
Root	data-negative	Present when the current value is negative (requires AllowNegative), emitted by NaviusCurrencyInput; renders the value in the destructive color.

Underlying primitives

• NaviusCurrencyInput