The fields number components are used for collecting user provided number information.
Error
You can use this bool to manually set the field in State 'error'.
The Field need to receive a cascaded EditContext. The Error and ValidationMessage will be manage automatically by the EditContext.
| Type | Default Value |
|---|
| bool | false |
An error occur.
This is a hint
<NVFieldNumber Error Margin=". . 3"/>
<NVFieldNumber
Error
Message="This is a hint"
Validation="An error occur."
/>
<div class="nv-field nv-field-number nv-field-error mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="number">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-alert-circle text-error"></i>
</div>
</div>
</div>
<div class="nv-field nv-field-number nv-field-error">
<div class="nv-field-input">
<input autocomplete="off" type="number">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-alert-circle text-error"></i>
</div>
</div>
<div class="nv-field-message">
<div class="nv-field-validation">An error occur.</div>
<div>This is a hint</div>
</div>
</div>
<nv-fieldnumber margin=". . 3" error></nv-fieldnumber>
<nv-fieldnumber error message="This is a hint." validation="An error occur"></nv-fieldnumber>
<NvFieldNumber error margin=". . 3" />
<NvFieldNumber error message="This is a hint." validation="An error occur" />
Label
Label define the label value of the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldNumber Name="labelSample" Label="This is a label"/>
<div class="nv-field nv-field-number">
<label class="nv-field-label" for="labelSample">This is a label</label>
<div class="nv-field-input">
<input autocomplete="off" type="number" id="labelSample" name="labelSample">
</div>
</div>
<nv-fieldnumber label="This is a label" name="labelSample">
</nv-fieldnumber>
<NvFieldNumber label="This is a label" name="labelSample" />
Max
Define the maximum value for the number.
| Type | Default Value |
|---|
| TValue | null |
<NVFieldNumber Max=@(10)/>
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" type="number" max="10">
</div>
</div>
<nv-fieldnumber max="10"></nv-fieldnumber>
<NvFieldNumber max="10" />
Message
Message define a 'hint ' message for the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldNumber Message="This is a message"/>
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" type="number">
</div>
<div class="nv-field-message">
<div>This is a message</div>
</div>
</div>
<nv-fieldnumber message="This is a message"></nv-fieldnumber>
<NvFieldNumber message="This is a message" />
Min
Define the minimum value for the number.
| Type | Default Value |
|---|
| TValue | null |
<NVFieldNumber Min=@(0) Message="This is a message"/>
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" type="number" min="0">
</div>
<div class="nv-field-message">
<div>This is a message</div>
</div>
</div>
<nv-fieldnumber min="0"></nv-fieldnumber>
<NvFieldNumber min="0" />
Name
Name define the unique name for a field.
It will add name and id attributes of the input. If there is a label will also add the for attribute to the label.
When for is provided to a label element and when an id is provided to the input element (with the same value), the label click will focus the input.
If an EditContext is provided by the EditForm, the FieldIdentifier.FieldName will be used.
If you don't pass a this parameter, an autoName will be generated and used within attributes of input and label.
| Type | Default Value |
|---|
| string | null |
<NVFieldNumber Name="uniqueName" Label="This is a label"/>
<div class="nv-field nv-field-number">
<label class="nv-field-label" for="uniqueName">This is a label</label>
<div class="nv-field-input">
<input autocomplete="off" type="number" id="uniqueName" name="uniqueName">
</div>
</div>
<nv-fieldnumber label="This is a label" name="uniqueName"></nv-fieldnumber>
<NvFieldNumber label="This is a label" name="uniqueName" />
NVFieldAfter
Add content after the 'input' element.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldNumber Name="FieldAfter" Label="FieldAfter">
<NVFieldAfter>
<NVIcon Name="search"/>
</NVFieldAfter>
</NVFieldNumber>
<div class="nv-field nv-field-number">
<label class="nv-field-label" for="FieldAfter">FieldAfter</label>
<div class="nv-field-input">
<input autocomplete="off" type="number" id="FieldAfter" name="FieldAfter">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-search"></i>
</div>
</div>
</div>
<nv-fieldnumber label="FieldAfter" name="FieldAfter">
<div slot="after">
<nv-icon name="search"></nv-icon>
</div>
</nv-fieldnumber>
<NvFieldNumber label="FieldAfter" name="FieldAfter">
<div slot="after">
<NvIcon name="search"></NvIcon>
</div>
</NvFieldNumber>
NVFieldBefore
Add content before the 'input' element.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldNumber Name="FieldBefore" Label="FieldBefore">
<NVFieldBefore>
<NVIcon Name="search"/>
</NVFieldBefore>
</NVFieldNumber>
<div class="nv-field nv-field-number">
<label class="nv-field-label" for="FieldBefore">FieldBefore</label>
<div class="nv-field-input">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-search"></i>
</div>
<input autocomplete="off" type="number" id="FieldBefore" name="FieldBefore">
</div>
</div>
<nv-fieldnumber label="FieldBefore" name="FieldBefore">
<div slot="before">
<nv-icon name="search"></nv-icon>
</div>
</nv-fieldnumber>
<NvFieldNumber label="FieldBefore" name="FieldBefore">
<div slot="before">
<NvIcon name="search"></NvIcon>
</div>
</NvFieldNumber>
NVFieldLabel
FieldLabel define the label's content of the Text Field.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldNumber Name="FieldLabel">
<NVFieldLabel>
This is a <NVBlock Tag="strong" TextColor="red-500">label</NVBlock>
</NVFieldLabel>
</NVFieldNumber>
<div class="nv-field nv-field-number">
<label class="nv-field-label" for="FieldLabel">
This is a <strong class="text-red-500">label</strong>
</label>
<div class="nv-field-input">
<input autocomplete="off" type="number" id="FieldLabel" name="FieldLabel">
</div>
</div>
<nv-fieldnumber name="FielLabel">
<div slot="label">This is a <strong>label</strong>
</div>
</nv-fieldnumber>
<NvFieldNumber name="FielLabel">
<div slot="label"> This is a <strong>label</strong>
</div>
</NvFieldNumber>
NVFieldMessage
When you need a more complex (with html markups) message, you can use FieldMessage RenderFragment.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldNumber>
<NVFIeldMessage>This is a message with <strong>markups</strong></NVFIeldMessage>
</NVFieldNumber>
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" type="number">
</div>
<div class="nv-field-message">
<div>This is a message with <strong>markups</strong></div>
</div>
</div>
<nv-fieldnumber>
<div slot="message">This is a message with <strong>markups</strong>
</div>
</nv-fieldnumber>
<NvFieldNumber>
<div slot="message"> This is a message with <strong>markups</strong>
</div>
</NvFieldNumber>
NVFieldValidation
When you need a more complex (with html markups) Validation message, you can use FieldValidation RenderFragment.
It will override the Validation message, coming from Model/EditContext or from Validation Parameter.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldNumber Error>
<NVFieldValidation>An error <strong>occurred</strong>.</NVFieldValidation>
</NVFieldNumber>
<div class="nv-field nv-field-number nv-field-error">
<div class="nv-field-input">
<input autocomplete="off" type="number">
</div>
<div class="nv-field-message">
<div class="nv-field-validation">An error <strong>occurred</strong>.</div>
</div>
</div>
<nv-fieldnumber error="true">
<div slot="validation"> This is a <strong>validation</strong> message </div>
</nv-fieldnumber>
<NvFieldNumber error>
<div slot="validation"> This is a <strong>validation</strong> message </div>
</NvFieldNumber>
Placeholder
Placeholder define the placeholder value of the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldNumber Placeholder="This is a placeholder"/>
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" placeholder="This is a placeholder" type="number">
</div>
</div>
<nv-fieldnumber placeholder="This is a placeholder"></nv-fieldnumber>
<NvFieldNumber placeholder="This is a placeholder"/>
Readonly
Set the Field input as readonly.
| Type | Default Value |
|---|
| bool | false |
<NVFieldNumber Readonly />
<div class="nv-field nv-field-number nv-field-readonly">
<div class="nv-field-input">
<input type="number" autocomplete="off" readonly="readonly">
</div>
</div>
<nv-fieldnumber readonly></nv-fieldnumber>
<NvFieldNumber placeholder="This is a placeholder" />
Required
Set the Field as required. This adds an * after the label.
| Type | Default Value |
|---|
| bool | false |
<NVFieldnumber Name="Required" Label="Required" Required />
<div class="nv-field nv-field-number nv-field-required">
<label class="nv-field-label" for="Required">Required</label>
<div class="nv-field-input">
<input type="number" autocomplete="off" id="Required" name="Required">
</div>
</div>
<nv-fieldnumber name="Required" label="Required" required></nv-fieldnumber>
<NvFieldNumber label="Required" name="Required" required />
Step
| Type | Default Value |
|---|
| TValue | null |
<NVFieldNumber Step=@(0.1) />
<div class="nv-field nv-field-number">
<div class="nv-field-input">
<input autocomplete="off" type="number" step="0.1">
</div>
</div>
<nv-fieldnumber label="Label" step="0.1"></nv-fieldnumber>
<NvFieldNumber label="Label" step="0.1" />
Success
Set the field in State 'success'.
| Type | Default Value |
|---|
| bool | false |
Well done !
This is a hint
<NVFieldNumber Success Margin=". . 3"/>
<NVFieldNumber
Success
Message="This is a hint"
Validation="Well done !"
/>
<div class="nv-field nv-field-number nv-field-success mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="number">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-circle-check text-success"></i>
</div>
</div>
</div>
<div class="nv-field nv-field-number nv-field-success">
<div class="nv-field-input">
<input autocomplete="off" type="number">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-circle-check text-success"></i>
</div>
</div>
<div class="nv-field-message">
<div class="nv-field-validation">Well done !</div>
<div>This is a hint</div>
</div>
</div>
<nv-fieldnumber margin=". . 3" success></nv-fieldnumber>
<nv-fieldnumber success message="This is a hint" validation="Well done !"></nv-fieldnumber>
<NvFieldNumber margin=". . 3" success />
<NvFieldNumber message="This is a hint" success validation="Well done !" />
