The fields text components are used for collecting user provided information. They typically reside in forms but can appear in other places, like dialog boxes and search.
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
<NVFieldText Error Margin=". . 3"/>
<NVFieldText
Error
Message="This is a hint"
Validation="An error occur."
/>
<div class="nv-field nv-field-text nv-field-error mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="text">
<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-text nv-field-error">
<div class="nv-field-input">
<input autocomplete="off" type="text">
<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-fieldtext margin=". . 3" error></nv-fieldtext>
<nv-fieldtext error message="This is a hint." validation="An error occured"></nv-fieldtext>
<NvFieldText error margin=". . 3" />
<NvFieldText error message="This is a hint." validation="An error occurred" />
Label
Label define the label value of the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldText Name="labelSample" Label="This is a label"/>
<div class="nv-field nv-field-text">
<label class="nv-field-label" for="labelSample">This is a label</label>
<div class="nv-field-input">
<input autocomplete="off" type="text" id="labelSample" name="labelSample">
</div>
</div>
<nv-fieldtext label="This is a label"></nv-fieldtext>
<NvFieldText label="This is a label" />
Message
Message define a 'hint ' message for the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldText Message="This is a message"/>
<div class="nv-field nv-field-text">
<div class="nv-field-input">
<input autocomplete="off" type="text">
</div>
<div class="nv-field-message">
<div>This is a message</div>
</div>
</div>
<nv-fieldtext label="Label" message="This is a message"></nv-fieldtext>
<NvFieldText label="Label" message="This is a message"
/>
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 |
<NVFieldText Name="uniqueName" Label="This is a label"/>
<div class="nv-field nv-field-text">
<label class="nv-field-label" for="uniqueName">This is a label</label>
<div class="nv-field-input">
<input autocomplete="off" type="text" id="uniqueName" name="uniqueName">
</div>
</div>
<nv-fieldtext label="This is a label" name="MyInputName"></nv-fieldtext>
<NvFieldText label="Label" message="This is a message" />
NVFieldAfter
Add content after the 'input' element.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldText Name="FieldAfter" Label="FieldAfter">
<NVFieldAfter>
<NVIcon Name="search"/>
</NVFieldAfter>
</NVFieldText>
<div class="nv-field nv-field-text">
<label class="nv-field-label" for="FieldAfter">FieldAfter</label>
<div class="nv-field-input">
<input autocomplete="off" type="text" id="FieldAfter" name="FieldAfter">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-search"></i>
</div>
</div>
</div>
<nv-fieldtext label="FieldAfter" name="FieldAfter">
<div slot="after">
<nv-icon name="search"></nv-icon>
</div>
</nv-fieldtext>
<NvFieldText label="FieldAfter" name="FieldAfter">
<div slot="after">
<NvIcon name="search"></NvIcon>
</div>
</NvFieldText>
NVFieldBefore
Add content before the 'input' element.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldText Name="FieldBefore" Label="FieldBefore">
<NVFieldBefore>
<NVIcon Name="search"/>
</NVFieldBefore>
</NVFieldText>
<div class="nv-field nv-field-text">
<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="text" id="FieldBefore" name="FieldBefore">
</div>
</div>
<nv-fieldtext label="FieldBefore" name="FieldBefore">
<div slot="before">
<nv-icon name="search"></nv-icon>
</div>
</nv-fieldtext>
<NvFieldText label="FieldBefore" name="FieldBefore">
<div slot="before">
<NvIcon name="search"></NvIcon>
</div>
</NvFieldText>
NVFieldLabel
FieldLabel define the label's content of the Text Field.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldText Name="FieldLabel">
<NVFieldLabel>
This is a <NVBlock Tag="strong" TextColor="red-500">label</NVBlock>
</NVFieldLabel>
</NVFieldText>
<div class="nv-field nv-field-text">
<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="text" id="FieldLabel" name="FieldLabel">
</div>
</div>
<nv-fieldtext name="FielLabel">
<div slot="label"> This is a <nv-block tag="strong" textcolor="red-500">label</nv-block>
</div>
</nv-fieldtext>
<NvFieldText name="FielLabel">
<div slot="label"> This is a{' '} <NvBlock tag="strong" textColor="red-500"> label </NvBlock>
</div>
</NvFieldText>
NVFieldMessage
When you need a more complex (with html markups) message, you can use FieldMessage RenderFragment.
| Type | Default Value |
|---|
| RenderFragment | null |
<NVFieldText>
<NVFieldMessage>This is a message with <strong>markups</strong></NVFieldMessage>
</NVFieldText>
<div class="nv-field nv-field-text mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="text">
</div>
<div class="nv-field-message">
<div>This is a message with <strong>markups</strong></div>
</div>
</div>
<nv-fieldtext>
<div slot="message">This is a message with <strong>markups</strong>
</div>
</nv-fieldtext>
<NvFieldText>
<div slot="message"> This is a message with <strong>markups</strong>
</div>
</NvFieldText>
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 |
This is a validation message
<NVFieldText
Error
>
<NVFieldValidation>This is a <strong>validation</strong> message</NVFieldValidation>
</NVFieldText>
<div class="nv-field nv-field-text nv-field-error mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="text">
<div class="nv-field-input-plugin">
<i class="nv-icon nv-icon-alert-circle"></i>
</div>
</div>
<div class="nv-field-message">
<div class="nv-field-validation">This is a <strong>validation</strong> message</div>
</div>
</div>
<nv-fieldtext error="true">
<div slot="validation">This is a <strong>validation</strong> message </div>
</nv-fieldtext>
<NvFieldText error>
<div slot="validation"> This is a <strong>validation</strong> message </div>
</NvFieldText>
Placeholder
Placeholder define the placeholder value of the Text Field.
| Type | Default Value |
|---|
| string | null |
<NVFieldText Placeholder="This is a placeholder"/>
<div class="nv-field nv-field-text">
<div class="nv-field-input">
<input autocomplete="off" placeholder="This is a placeholder" type="text">
</div>
</div>
<nv-fieldtext placeholder="This is a placeholder"></nv-fieldtext>
<NvFieldText placeholder="This is a placeholder" />
Readonly
Set the Field input as readonly.
| Type | Default Value |
|---|
| bool | false |
<div class="nv-field nv-field-text nv-field-readonly">
<div class="nv-field-input">
<input type="text" autocomplete="off" readonly="readonly">
</div>
</div>
<nv-fieldtext readonly></nv-fieldtext>
Required
Set the Field as required. This adds an * after the label.
| Type | Default Value |
|---|
| bool | false |
<NVFieldText Name="Required" Label="Required" Required />
<div class="nv-field nv-field-text nv-field-required">
<label class="nv-field-label" for="Required">Required</label>
<div class="nv-field-input">
<input type="text" autocomplete="off" id="Required" name="Required">
</div>
</div>
<nv-fieldtext label="Required" required></nv-fieldtext>
<NvFieldText label="Required" required/>
Success
Set the field in State 'success'.
| Type | Default Value |
|---|
| bool | false |
Well done !
This is a hint
<NVFieldText Success Margin=". . 3"/>
<NVFieldText
Success
Message="This is a hint"
Validation="Well done !"
/>
<div class="nv-field nv-field-text nv-field-success mb-3">
<div class="nv-field-input">
<input autocomplete="off" type="text">
<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-text nv-field-success">
<div class="nv-field-input">
<input autocomplete="off" type="text">
<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-fieldtext margin=". . 3" success></nv-fieldtext>
<nv-fieldtext success message="This is a hint" validation="Well done !"></nv-fieldtext>
<NvFieldText margin=". . 3" success />
<NvFieldText message="This is a hint" success validation="Well done!" />
