Components

Textarea components are used for collecting large amounts of textual data.

Error

Set manually the field in State 'error'.

If the Field is used within an EditForm, an EditContext will be cascaded, and the Error and Validation will be manage automatically by the EditContext.

Type	Default Value
bool	false

An error occur.

This is a hint

<NVFieldTextArea Error Margin=". . 3"/>  
<NVFieldTextArea  
  Error 
  Message="This is a hint" 
  Validation="An error occur."
/>

<div class="nv-field nv-field-textarea nv-field-error mb-3">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
    <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-textarea nv-field-error">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
    <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-fieldtextarea error margin=". . 3"></nv-fieldtextarea>
<nv-fieldtextarea error message="this is a hint" validation="an error ocur."></nv-fieldtextarea>

<NvFieldTextArea error margin=". . 3"></NvFieldTextArea>
<NvFieldTextArea error message="this is a hint" validation="an error ocur."></NvFieldTextArea>

Label

Label define the label value of the Textarea Field.

Type	Default Value
string	null

This is a label

<NVFieldTextArea Name="labelSample" Label="This is a label"/>

<div class="nv-field nv-field-textarea">
  <label class="nv-field-label" for="labelSample">This is a label</label>
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off" id="labelSample" name="labelSample"></textarea>
  </div>
</div>

<nv-fieldtextarea name="LabelSample" label="This is a label">
</nv-fieldtextarea>

<NvFieldTextArea name="LabelSample" label="This is a label"></NvFieldTextArea>
}

Message

Message define a 'hint ' message for the Textarea Field.

Type	Default Value
string	null

This is a message

<NVFieldTextArea Message="This is a message"/>

<div class="nv-field nv-field-textarea">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
  </div>
  
  <div class="nv-field-message">
    <div>This is a message</div>
  </div>
</div>

<nv-fieldtextarea message="this is a message"> </nv-fieldtextarea>

<NvFieldTextArea message="this is a message"></NvFieldTextArea>

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, with the same value, to an input element, 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. (since v1.0-rc.6)

Type	Default Value
string	null

This is a label

<NVFieldTextArea Name="uniqueName" Label="This is a label"/>

<div class="nv-field nv-field-textarea">
  <label class="nv-field-label" for="uniqueName">This is a label</label>
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off" id="uniqueName" name="uniqueName"></textarea>
  </div>
</div>

<nv-fieldtextarea name="uniqueName" label="This is a label"></nv-fieldtextarea>

<NvFieldTextArea name="uniqueName" label="This is a label"></NvFieldTextArea>

NVFieldAfter

Add content after the 'texarea' element.

Type	Default Value
RenderFragment	null

FieldAfter

<NVFieldTextArea Name="FieldAfter" Label="FieldAfter">
  <NVFieldAfter>
    <NVIcon Name="search"/>
  </NVFieldAfter>
</NVFieldTextArea>

<div class="nv-field nv-field-textarea">
  <label class="nv-field-label" for="FieldAfter">FieldAfter</label>
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off" id="FieldAfter" name="FieldAfter"></textarea>
    <div class="nv-field-input-plugin">
      <i class="nv-icon nv-icon-search"></i>
    </div>
  </div>
</div>

<nv-fieldtextarea label="FieldAfter" name="FieldAfter">
  <div slot="after">
    <nv-icon name="search"></nv-icon>
  </div>
</nv-fieldtextarea>

<NvFieldTextArea label="FieldAfter" name="FieldAfter">
  <div slot="after">
    <NvIcon name="search"></NvIcon>
  </div>
</NvFieldTextArea>

NVFieldBefore

Add content before the 'texarea' element.

Type	Default Value
RenderFragment	null

FieldBefore

<NVFieldTextArea Name="FieldBefore" Label="FieldBefore">
  <NVFieldBefore>
    <NVIcon Name="search"/>
  </NVFieldBefore>
</NVFieldTextArea>

<div class="nv-field nv-field-textarea">
  <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>
     <textarea rows="6" autocomplete="off" id="FieldBefore" name="FieldBefore"></textarea>
   </div>
</div>

<nv-fieldtextarea label="FieldBefore" name="FieldBefore">
  <div slot="before">
    <nv-icon name="search"></nv-icon>
  </div>
</nv-fieldtextarea>

<NvFieldTextArea label="FieldBefore" name="FieldBefore">
  <div slot="before">
    <NvIcon name="search"></NvIcon>
  </div>
</NvFieldTextArea>

NVFieldLabel

FieldLabel define the content of the label of the Textarea Field.

Type	Default Value
RenderFragment	null

This is a label

<NVFieldTextArea Name="FieldLabel">
  <NVFieldLabel>
    This is a <NVBlock Tag="strong" TextColor="error">label</NVBlock>
  </NVFieldLabel>
</NVFieldTextArea>

<div class="nv-field nv-field-textarea">
  <label class="nv-field-label" for="FieldLabel">
    This is a <strong class="text-error">label</strong>
  </label>
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off" id="FieldLabel" name="FieldLabel"></textarea>
  </div>
</div>

<nv-fieldtextarea name="FielLabel">
  <div slot="label">This is a <strong>label</strong>
  </div>
</nv-fieldtextarea>

<NvFieldTextArea name="FielLabel">
   <div slot="label"> This is a <strong>label</strong>
   </div>
 </NvFieldTextArea>

NVFieldMessage

When you need a more complex (with html markups) message, you can use FieldMessage RenderFragment.

Type	Default Value
RenderFragment	null

This is a message with markups

<NVFieldTextArea>
  <NVFieldMessage>This is a message with <strong>markups</strong></NVFieldMessage>
</NVFieldTextArea>

<div class="nv-field nv-field-text mb-3">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>      
  </div>
  <div class="nv-field-message">
    <div class="nv-field-validation">This is a message with <strong>markups</strong></div>    
  </div>
</div>

<nv-fieldtextarea>
  <div slot="message">This is a message with <strong>markups</strong>
  </div>
</nv-fieldtextarea>

<NvFieldTextArea>
  <div slot="message"> This is a message with <strong>markups</strong>
  </div>
</NvFieldTextArea>

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

<NVFieldTextArea Error>
  <NVFieldValidation>This is a <strong>validation</strong> message</NVFieldValidation>
</NVFieldTextArea>

<div class="nv-field nv-field-textarea nv-field-error mb-3">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
    <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-fieldtextarea error>
  <div slot="validation"> This is a <strong>validation</strong> message </div>
</nv-fieldtextarea>

<NvFieldTextArea error>
  <div slot="validation"> This is a <strong>validation</strong> message </div>
</NvFieldTextArea>

Placeholder

Placeholder define the placeholder value of the Textarea Field.

Type	Default Value
string	null

<NVFieldTextArea Placeholder="This is a placeholder"/>

<div class="nv-field nv-field-textarea">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off" placeholder="This is a placeholder"></textarea>
  </div>
</div>

<nv-fieldtextarea placeholder="This is a placeholder">
</nv-fieldtextarea>

<NvFieldTextArea placeholder="This is a placeholder"></NvFieldTextArea>

Readonly

Set the Field input as readonly.

Type	Default Value
bool	false

<NVFieldTextArea Readonly />

<div class="nv-field nv-field-textarea nv-field-readonly">
  <div class="nv-field-input">
    <textarea autocomplete="off" readonly="readonly" rows="6"></textarea>
  </div>
</div>

<nv-fieldtextarea readonly></nv-fieldtextarea>

<NvFieldTextArea readonly></NvFieldTextArea>

Required

Set the Field as required. This adds an * after the label.

Type	Default Value
bool	false

Required

<NVFieldTextArea 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">
    <textarea autocomplete="off" id="Required" name="Required" placeholder="Required" rows="6"></textarea>
  </div>
</div>

<nv-fieldtextarea name="Required" label="Required" required>
</nv-fieldtextarea>

<NvFieldTextArea name="Required" label="Required" required></NvFieldTextArea>
}

Rows

Rows let us to change to number of lines display by the textarea.

Type	Default Value
string	6

<NVFieldTexarea Row="2" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius suscipit nunc. Mauris ac condimentum justo. Nulla congue sem vel ante volutpat, sed semper quam varius. Nam et lectus sit amet arcu pharetra sodales. Donec mi neque, lacinia ut gravida vel, fringilla in dui. Nunc non velit neque." />

<div class="nv-field nv-field-textarea">
  <div class="nv-field-input">
    <textarea rows="2" autocomplete="off" id="FieldAfter" name="FieldAfter">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius suscipit nunc. Mauris ac condimentum justo. Nulla congue sem vel ante volutpat, sed semper quam varius. Nam et lectus sit amet arcu pharetra sodales. Donec mi neque, lacinia ut gravida vel, fringilla in dui. Nunc non velit neque.
    </textarea>
  </div>
</div>

<nv-fieldtextarea rows="2" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.
  Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius
  suscipit nunc. Mauris ac condimentum justo. Nulla congue sem vel ante
  volutpat, sed semper quam varius. Nam et lectus sit amet arcu pharetra
  sodales. Donec mi neque, lacinia ut gravida vel, fringilla in dui. Nunc
  non velit neque.">
  </nv-fieldtextarea>

<NvFieldTextArea rows={2} value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius suscipit nunc. Mauris ac condimentum justo. Nulla congue sem vel ante volutpat, sed semper quam varius. Nam et lectus sit amet arcu pharetra sodales. Donec mi neque, lacinia ut gravida vel, fringilla in dui. Nunc non velit neque."></NvFieldTextArea>

Success

Set the field in State 'success'.

Type	Default Value
bool	false

Well done !

This is a hint

<NVFieldTextArea Success Margin=". . 3"/>
<NVFieldTextArea  
  Success 
  Message="This is a hint" 
  Validation="Well done !"
/>

<div class="nv-field nv-field-textarea nv-field-success mb-3">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
    <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-textarea nv-field-success">
  <div class="nv-field-input">
    <textarea rows="6" autocomplete="off"></textarea>
    <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-fieldtextarea success margin=". . 3"></nv-fieldtextarea>
<nv-fieldtextarea success message="this is a hint" validation="Well done"></nv-fieldtextarea>

<NvFieldTextArea success margin=". . 3"></NvFieldTextArea>
<NvFieldTextArea success message="this is a hint" validation="Well done"></NvFieldTextArea>

Field Textarea

Error

Label

Message

Name

NVFieldAfter

NVFieldBefore

NVFieldLabel

NVFieldMessage

NVFieldValidation

Placeholder

Readonly

Required

Rows

Success

On this page