Components

Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

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

Error

An error occur.

This is a hint

<NVFieldCheckbox  
  Name="Error"
  Label="Error"
  Error
  Message="This is a hint" 
  Validation="An error occur."
/>

<div class="nv-field nv-field-checkbox nv-field-error">
<label for="Error" class="nv-field-label">Error</label>
  <div class="nv-field-input">
    <input id="Error" name="Error" autocomplete="off" type="checkbox">
  </div>
  <div class="nv-field-message">
    <div class="nv-field-validation">An error occur.</div>
    <div>This is a hint</div>    
  </div>
</div>

<nv-fieldcheckbox name="Error" label="Error" message="This is a hint" 
validation="An error occur." error>
</nv-fieldcheckbox>

<NvFieldCheckbox error label="Error" message="This is a hint"
  name="Error" validation="An error occur."
/>

Indeterminate

Set the Field as indeterminate.

Type	Default Value
bool	false

Indeterminate

Indeterminate and Disabled

<NVFieldCheckbox Name="Indeterminate" Label="Indeterminate" Indeterminate MB="2" />
<NVFieldCheckbox Name="IndeterminateDisabled" Label="Indeterminate and Disabled" Indeterminate Disabled />

<div class="nv-field nv-field-checkbox nv-field-indeterminate mb-2">
  <label class="nv-field-label" for="Indeterminate">Indeterminate</label>
  <div class="nv-field-input">
    <input autocomplete="off" id="Indeterminate" name="Indeterminate" type="checkbox" />
  </div>
</div>

<div class="nv-field nv-field-checkbox nv-field-disabled nv-field-indeterminate">
  <label class="nv-field-label" for="IndeterminateDisabled">Indeterminate and Disabled</label>
  <div class="nv-field-input">
    <input autocomplete="off" disabled="disabled" id="IndeterminateDisabled" name="IndeterminateDisabled" type="checkbox" />
  </div>
</div>

<nv-fieldcheckbox label="Indeterminate" name="Indeterminate" mb="2" indeterminate></nv-fieldcheckbox>
<nv-fieldcheckbox name="IndeterminateDisabled" label="Indeterminate and Disabled" disabled indeterminate></nv-fieldcheckbox>

<NvFieldCheckbox indeterminate label="Indeterminate" mb="2" name="Indeterminate" />
<NvFieldCheckbox disabled indeterminate label="Indeterminate and Disabled" name="IndeterminateDisabled" />

Label

Label define the label value of the Checkbox Field.

Type	Default Value
string	null

This is a label

<NVFieldCheckbox Name="Label" Label="This is a label"/>

<div class="nv-field nv-field-checkbox">
  <label class="nv-field-label" for="Label">This is a label</label>
  <div class="nv-field-input">
    <input autocomplete="off" type="checkbox" id="Label" name="Label">
  </div>
</div>

<nv-fieldcheckbox name="Label" label="This is a label"></nv-fieldcheckbox>

<NvFieldCheckbox label="This is a label" name="Label" />

LabelBefore

Type	Default Value
bool	false

This is a label

<NVFieldCheckbox Name="Label" Label="This is a label" LabelBefore/>

<div class="nv-field nv-field-checkbox nv-field-label-before">
  <label class="nv-field-label" for="Label">This is a label</label>
  <div class="nv-field-input">
    <input autocomplete="off" type="radio" id="Label" name="Label">
  </div>
</div>

<nv-fieldcheckbox name="Label" label="This is a label" labelbefore></nv-fieldcheckbox>

<NvFieldCheckbox label="This is a label" labelBefore name="Label" />

LabelBeforeWidth

Type	Default Value
string	null

This is a label

<NVFieldCheckbox Name="Label" Label="This is a label" LabelBefore LabelBeforeWidth="250px"/>

<div class="nv-field nv-field-checkbox nv-field-label-before">
  <label class="nv-field-label" for="Label" style="width: 250px">This is a label</label>
  <div class="nv-field-input">
    <input autocomplete="off" type="radio" id="Label" name="Label">
  </div>
</div>

<nv-fieldcheckbox name="Label" label="This is a label" labelbefore labelbeforewidth="250px"></nv-fieldcheckbox>

<NvFieldCheckbox label="This is a label" labelBefore labelBeforeWidth="250px" name="Label" />

Message

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

Type	Default Value
string	null

Message

This is a message

<NVFieldCheckbox Label="Message" Message="This is a message"/>

<div class="nv-field nv-field-checkbox">
<label for="Message" class="nv-field-label">Message</label>
  <div class="nv-field-input">
    <input id="Message" Name="Message" autocomplete="off" type="checkbox">
  </div>
  <div class="nv-field-message">
    <div>This is a message</div>
  </div>
</div>

<nv-fieldcheckbox label="Checkbox" message="This is a message"></nv-fieldcheckbox>

<NvFieldCheckbox label="Checkbox" 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, 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.

Type	Default Value
string	null

This is a label

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

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

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

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

NVFieldAfter

Add content after the 'input' element.

Type	Default Value
RenderFragment	null

FieldAfter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.

<NVFieldCheckbox Name="FieldAfter" Label="FieldAfter">
  <NVFieldAfter>
    <NVBlock Tag="p" Margin="1 . ." TextSize="sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.</NVBlock>
  </NVFieldAfter>
</NVFieldCheckbox>

<div class="nv-field nv-field-checkbox">
  <label class="nv-field-label" for="FieldAfter">FieldAfter</label>
  <div class="nv-field-input">
    <input autocomplete="off" type="checkbox" id="FieldAfter" name="FieldAfter">
  </div>
  <div class="nv-field-input-plugin">
   <p class="text-sm mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.</p>
 </div>
</div>

<nv-fieldcheckbox name="After" label="After" id="checkbox1">
  <nv-block slot="after" margin="1 . ." textsize="sm">This is a message with <strong> markups</strong>
  </nv-block>
</nv-fieldcheckbox>

<NvFieldCheckbox name="After" label="After" id="checkbox1">
  <NvBlock slot="after" margin="1 . ." textSize="sm"> This is a message with <strong> markups</strong>
  </NvBlock>
</NvFieldCheckbox>

NVFieldBefore

Add content before the 'input' element.

Type	Default Value
RenderFragment	null

FieldBefore

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.

<NVFieldCheckbox Name="FieldBefore" Label="FieldBefore">
  <NVFieldBefore>
    <NVBlock Tag="p" Margin=". . 1" TextSize="sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.</NVBlock>
  </NVFieldBefore>
</NVFieldCheckbox>

<div class="nv-field nv-field-checkbox">
  <label class="nv-field-label" for="FieldBefore">FieldBefore</label>
  <div class="nv-field-input-plugin">
     <p class="text-sm mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.</p>
   </div>
   <div class="nv-field-input">     
     <input autocomplete="off" type="checkbox" id="FieldBefore" name="FieldBefore">
   </div>
</div>

<nv-fieldcheckbox name="Before" label="Before" id="checkbox1">
  <nv-block slot="before" margin="1 . ." textsize="sm">This is a message with <strong> markups</strong>
  </nv-block>
</nv-fieldcheckbox>

<NvFieldCheckbox name="Before" label="Before" id="checkbox1">
  <NvBlock slot="before" margin="1 . ." textSize="sm"> This is a message with <strong> markups</strong>
  </NvBlock>
</NvFieldCheckbox>

NVFieldLabel

NVFieldLabel define the content label of the Checkbox Field.

Type	Default Value
RenderFragment	null

This is a label

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

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

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

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

NVFieldMessage

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

Type	Default Value
RenderFragment	null

FieldMessage

This is a message with markups

<NVFieldCheckbox Label="FieldMessage" Name="FieldMessage">
  <NVFieldMessage>This is a message with <strong>markups</strong></NVFieldMessage>
</NVFieldCheckbox>

<div class="nv-field nv-field-checkbox mb-3">
  <label class="nv-field-label" for="FieldMessage">FieldMessage</label>
  <div class="nv-field-input">
    <input id="FieldMessage" name="FieldMessage" autocomplete="off" type="checkbox">        
  </div>
  <div class="nv-field-message">
    <div class="nv-field-validation">This is a message with <strong>markups</strong></div>    
  </div>
</div>

<nv-fieldcheckbox label="Field Message">
  <div slot="message">This is a message with <strong>markups</strong>
  </div>
</nv-fieldcheckbox>

<NvFieldCheckbox label="Field Message">
  <div slot="message"> This is a message with <strong>markups</strong>
  </div>
</NvFieldCheckbox>

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

FieldValidation

This is a validation message

<NVFieldCheckbox Name="FieldValidation" Label="FieldValidation" Error>
  <NVFieldValidation>This is a <strong>validation</strong> message</NVFieldValidation>
</NVFieldCheckbox>

<div class="nv-field nv-field-checkbox nv-field-error mb-3">
  <label class="nv-field-label" for="FieldValidation">FieldValidation</label>
  <div class="nv-field-input">
    <input id="FieldValidation" name="FieldValidation" autocomplete="off" type="checkbox">
  </div>
  <div class="nv-field-message">
    <div class="nv-field-validation">This is a <strong>validation</strong> message</div>
  </div>
</div>

<nv-fieldcheckbox error="true" label="Field Validation Error">
  <div slot="validation"> This is a <strong>validation</strong> message </div>
</nv-fieldcheckbox>

<NvFieldCheckbox error label="Field Validation Error">
  <div slot="validation"> This is a <strong>validation</strong> message </div>
</NvFieldCheckbox>

Required

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

Type	Default Value
bool	false

Required

<NVFieldCheckbox Name="Required" Label="Required" Required />

<div class="nv-field nv-field-checkbox nv-field-required">
  <label class="nv-field-label" for="Required">Required</label>
  <div class="nv-field-input">
    <input autocomplete="off" id="Required" name="Required" placeholder="Required" type="checkbox" />
  </div>
</div>

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

<NvFieldCheckbox label="Required" name="Required" required />

Success

Set the field in State 'success'.

Type	Default Value
bool	false

Success

Well done !

This is a hint

<NVFieldCheckbox  
  Success 
  Name="Success"
  Label="Success"
  Message="This is a hint" 
  Validation="Well done !"
/>

<div class="nv-field nv-field-checkbox nv-field-success">
  <label for="Success" class="nv-field-label">Success</label>
  <div class="nv-field-input">
    <input id="Success" name="Success" autocomplete="off" type="checkbox">    
  </div>
  <div class="nv-field-message">
    <div class="nv-field-validation">Well done !</div>
    <div>This is a hint</div>    
  </div>
</div>

<NvFieldCheckbox id="checkbox1" label="Success" message="This is a hint"
  name="Success" success validation="Well done !"
/>

<NvFieldCheckbox id="checkbox1" label="Success" 
message="This is a hint" name="Success" success validation="Well done !" />

Switch

When Switch is set to True, the checkbox will have the Switch 'UI'.

Type	Default Value
bool	false

Switch

<NVFieldCheckbox
  Label="Switch"
  Name="Switch"
  Switch
  Value="@true"
/>

<div class="nv-field nv-field-switch">
  <label class="nv-field-label" for="Switch">Switch</label>
  <div class="nv-field-input">
    <input autocomplete="off" type="checkbox" id="Switch" name="Switch" value="Switch" checked>
    <div class="nv-field-switch-line">
      <div class="nv-field-switch-dot"></div>
    </div>
  </div>
</div>

<nv-fieldcheckbox 
  label="Switch"
  name="Switch"
  value="true"
  switch>
</nv-fieldcheckbox>

<NvFieldCheckbox label="Switch" name="Switch" switch value="true"/>

Field Checkbox

Error

Indeterminate

Label

LabelBefore

LabelBeforeWidth

Message

Name

NVFieldAfter

NVFieldBefore

NVFieldLabel

NVFieldMessage

NVFieldValidation

Required

Success

Switch

On this page