NumericField: Blazor numeric field component

Examples

Binding

Bind any numeric type; Min, Max and Step constrain it and Format controls how it is shown.

SeatsBetween 1 and 50

Price per seat€

Total: 25.00 €

website/Examples/DataInput/NumericFieldBasicExample.razor Source

Types

T can be int, decimal or a nullable type, where an empty field binds to null.

Seats (int)

Storage (decimal)TB

Max retries (int?)

seats=12 · storage=0.25 · retries=null

website/Examples/DataInput/NumericFieldTypesExample.razor Source

States

Error with ErrorText, Disabled and ReadOnly work as on TextField.

Rate limit (req/s)Max 100 on the Pro plan.

Replicas

Uptime (h)Computed from the logs

website/Examples/DataInput/NumericFieldStatesExample.razor Source

Playground

SeatsBetween 1 and 10

Label

Value

Min

Max

Step

HelperText

Dense

Disabled

ReadOnly

Error

ErrorText

<NumericField
              T="int"
              Label="Seats"
              Value="3"
              Min="1"
              Max="10"
              HelperText="Between 1 and 10" />

API

<NumericField<T>>

DaisyBlazor

Parameters

Adornment Adornment
= Adornment.None
Where the adornment icon/text is placed (Start or End); None renders no adornment.
AdornmentIcon string
= null
Icon name rendered inside the input as the adornment.
AdornmentText string
= null
Text rendered inside the input as the adornment.
Dense bool
= false
When true, renders the compact input-sm size.
Disabled bool
= false
Disables the number input.
Error bool
= false
When true, applies input-error styling and shows ErrorText.
ErrorText string
= null
Error message shown below the input in error state; overrides any server-side error.
FieldName string
= null
Field name used to pick up a server-side error from an enclosing ServerValidation. Not called Name so the HTML name attribute keeps splatting through.
For object
= null
Accepted for MudBlazor compatibility; currently has no effect.
Format string
= null
Format string (invariant culture) used to display the value, e.g. "F2".
FullWidth bool
= true
When true (the default), the fieldset and input stretch to full width (w-full).
HelperText string
= null
Hint text shown below the input when there is no error.
Immediate bool
= false
Accepted for MudBlazor compatibility; currently has no effect (value updates on change, not on each keystroke).
Label string
= null
Text of the .label rendered above the input; a trailing asterisk is added when Required.
Margin Margin
= Margin.Normal
Margin.Dense makes the input compact (input-sm), like Dense.
Max T
= 0
Maximum allowed value, rendered as the input's max attribute.
Min T
= 0
Minimum allowed value, rendered as the input's min attribute.
Placeholder string
= null
Placeholder text shown in the empty number input.
ReadOnly bool
= false
Makes the number input read-only.
Required bool
= false
Sets the HTML required attribute and appends an asterisk to the label.
RequiredError string
= null
Message shown when an enclosing Form validates this Required field while it is empty. Defaults to "Required".
Step T
= 0
Increment step, rendered as the input's step attribute.
Validation object
= null
Checked by an enclosing Form: Func<T, string?> (error or null), Func<T, bool> or Func<T, IEnumerable<string>>.
Value T
= 0
The current numeric value (two-way bindable); empty or unparsable input resets it to default.
Variant Variant
= Variant.Outlined
Visual style: Outlined (default) draws the daisyUI border, Filled adds bg-base-200, Text renders a borderless ghost field (input-ghost).
Class string
= null
Extra CSS classes merged onto the root .fieldset element.
Style string
= null
Inline CSS styles applied to the root .fieldset element.

Name	Type	Default	Description
Adornment	Adornment	Adornment.None	Where the adornment icon/text is placed (Start or End); None renders no adornment.
AdornmentIcon	string	null	Icon name rendered inside the input as the adornment.
AdornmentText	string	null	Text rendered inside the input as the adornment.
Dense	bool	false	When true, renders the compact input-sm size.
Disabled	bool	false	Disables the number input.
Error	bool	false	When true, applies input-error styling and shows ErrorText.
ErrorText	string	null	Error message shown below the input in error state; overrides any server-side error.
FieldName	string	null	Field name used to pick up a server-side error from an enclosing ServerValidation. Not called Name so the HTML name attribute keeps splatting through.
For	object	null	Accepted for MudBlazor compatibility; currently has no effect.
Format	string	null	Format string (invariant culture) used to display the value, e.g. "F2".
FullWidth	bool	true	When true (the default), the fieldset and input stretch to full width (w-full).
HelperText	string	null	Hint text shown below the input when there is no error.
Immediate	bool	false	Accepted for MudBlazor compatibility; currently has no effect (value updates on change, not on each keystroke).
Label	string	null	Text of the .label rendered above the input; a trailing asterisk is added when Required.
Margin	Margin	Margin.Normal	Margin.Dense makes the input compact (input-sm), like Dense.
Max	T	0	Maximum allowed value, rendered as the input's max attribute.
Min	T	0	Minimum allowed value, rendered as the input's min attribute.
Placeholder	string	null	Placeholder text shown in the empty number input.
ReadOnly	bool	false	Makes the number input read-only.
Required	bool	false	Sets the HTML required attribute and appends an asterisk to the label.
RequiredError	string	null	Message shown when an enclosing Form validates this Required field while it is empty. Defaults to "Required".
Step	T	0	Increment step, rendered as the input's step attribute.
Validation	object	null	Checked by an enclosing Form: Func<T, string?> (error or null), Func<T, bool> or Func<T, IEnumerable<string>>.
Value	T	0	The current numeric value (two-way bindable); empty or unparsable input resets it to default.
Variant	Variant	Variant.Outlined	Visual style: Outlined (default) draws the daisyUI border, Filled adds bg-base-200, Text renders a borderless ghost field (input-ghost).
Class	string	null	Extra CSS classes merged onto the root .fieldset element.
Style	string	null	Inline CSS styles applied to the root .fieldset element.

Events

ValueChanged EventCallback<T>
Raised with the parsed value when the input's change event fires.

Name	Type	Description
ValueChanged	EventCallback<T>	Raised with the parsed value when the input's change event fires.

From MudNumericField

NumericField keeps MudNumericField's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.