Basic Text Field's
Dense
With the margin
prop you can reduce the text field height.
Form Props
Required, Disabled, Type, HelperText
Some helping Text
Some helping Text
Some helping Text
Adornments
This can be used to add a prefix or a suffix. Text, Icon or Icon Button.
Kr
Kg
Weight
Kg
Weight
Kg
Weight
Adornment Color
The color of the adornment can be changed separately from the textfield.
Kg
Binding Properties of a POCO
The following text fields are bound against the properties of a POCO (Plain old C-Sharp Object). Edit them to see the model change. Reset the model and see the textfields change.
Name: Hydrogen
Mass: 1.00794 u
Electrons: 1
Last Update: 3/4/2021
Binding Value Types vs Nullables
When you bind value types, the the text field will not be empty even if the user hasn't entered a value yet because a value type always has a value, even when unassigned.
The two-way-bindable Value
property will automatically assume the default value of that type (i.e. 0
for int
).
So if you want your text fields to be empty as long as nothing has been entered yet, use the nullable version of that type (i.e. int?
).
Enter an int
Enter a double
Enum (Yes|No|Maybe)
Immediate vs Debounced
Per default, MudTextField
updates the bound value on Enter or when it looses focus. Set Immediate="true"
to update the value whenever the user types.
You can also set the DebounceInterval
parameter to the amount of milliseconds you want to await before updating the bound value. If you need to know when the interval elapses, you can pass an OnDebounceIntervalElapsed
EventCallback.
Notice how in this example the debounced text only updates 500 ms after you stop typing.
Normal:
Immediate:
Debounced: