Field Select

The select component allows users to choose one option from a list. It is used in forms for users to submit data.

Error

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.

TypeDefault Value
boolfalse
An error occur.
This is a hint
<NVFieldSelect Error Margin=". . 3">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>  
<NVFieldSelect  
  Error 
  Message="This is a hint" 
  Validation="An error occur."
>
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

ForOptionValue

Func used to get the string value of an item within the Options parameter.
Need to be defined if you used the Options parameter.

TypeDefault Value
Func<TValue?, string>?null
<NVFieldSelect
  @bind-Value="@_model.FieldOptionSelectModel"
  TValue="FieldOptionSelect"
  Placeholder="select a FieldOptionSelect"
  Options="@(_options)"
  ForOptionValue="@((item) => item?.Id)"
  ForOptionLabel="@((item) => item?.Name)"
  Label="ForOptionValue"
  Name="ForOptionValue" />

@{
  private static FieldOptionSelect[] _options = new FieldOptionSelect[]
  {
    new() {Id = "FieldOptionSelect Id 1", Name = "FieldOptionSelect Name 1"},
    new() {Id = "FieldOptionSelect Id 2", Name = "FieldOptionSelect Name 2"},
    new() {Id = "FieldOptionSelect Id 3", Name = "FieldOptionSelect Name 3"}
  };
}

...

public class FieldOptionSelect
{
  public string Id { get; set; } = default!;
  public string Name { get; set; } = default!;
}

ForOptionLabel

Func used to get the string label of an item within the Options parameter.
If not set, ForOptionValue Func will be used for the label of the option of the select.

TypeDefault Value
Func<TValue?, string>?null
<NVFieldSelect
  @bind-Value="@_model.FieldOptionSelectModel"
  TValue="FieldOptionSelect"
  Placeholder="select a FieldOptionSelect"
  Options="@(_options)"
  ForOptionValue="@((item) => item?.Id)"
  ForOptionLabel="@((item) => item?.Name)"
  Label="ForOptionLabel"
  Name="ForOptionLabel" />  

@{
  private static FieldOptionSelect[] _options = new FieldOptionSelect[]
  {
    new() {Id = "FieldOptionSelect Id 1", Name = "FieldOptionSelect Name 1"},
    new() {Id = "FieldOptionSelect Id 2", Name = "FieldOptionSelect Name 2"},
    new() {Id = "FieldOptionSelect Id 3", Name = "FieldOptionSelect Name 3"}
  };
}

...

public class FieldOptionSelect
{
  public string Id { get; set; } = default!;
  public string Name { get; set; } = default!;
}

Label

Label define the label value of the Select.

TypeDefault Value
stringnull
<NVFieldSelect Name="labelSample" Label="This is a label">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

Message

Message define a 'hint ' message for the Select.

TypeDefault Value
stringnull
This is a message
<NVFieldSelect Message="This is a message">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

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.

TypeDefault Value
stringnull
<NVFieldSelect Name="uniqueName" Label="This is a label">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

NVFieldAfter

Add content after the 'input' element.

TypeDefault Value
RenderFragmentnull
<NVFieldSelect Name="FieldAfter" Label="FieldAfter">
  <ChildContent>
    <option value="value-1">label 1</option>
    <option value="value-2">label 2</option>
    <option value="value-3">label 3</option>
  </ChildContent>
  <NVFieldAfter>
    <NVIcon Name="search"/>
  </NVFieldAfter>
</NVFieldSelect>

NVFieldBefore

Add content before the 'input' element.

TypeDefault Value
RenderFragmentnull
<NVFieldSelect Name="FieldBefore" Label="FieldBefore">
  <ChildContent>
    <option value="value-1">label 1</option>
    <option value="value-2">label 2</option>
    <option value="value-3">label 3</option>
  </ChildContent>
  <NVFieldBefore>
    <NVIcon Name="search"/>
  </NVFieldBefore>
</NVFieldSelect>

NVFieldLabel

NVFieldLabel define the content of the label of the Select.

TypeDefault Value
RenderFragmentnull
<NVFieldSelect Name="FieldLabel">
  <ChildContent>
    <option value="value-1">label 1</option>
    <option value="value-2">label 2</option>
    <option value="value-3">label 3</option>
  </ChildContent>
  <NVFieldLabel>
    This is a <NVBlock Tag="strong" TextColor="error">label</NVBlock>
  </NVFieldLabel>
</NVFieldSelect>

NVFieldMessage

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

TypeDefault Value
RenderFragmentnull
This is a message
<NVFieldSelect>
  <ChildContent>
    <option value="value-1">label 1</option>
    <option value="value-2">label 2</option>
    <option value="value-3">label 3</option>
  </ChildContent>
  <NVFieldMessage>This is a <strong>message</strong></NVFieldMessage>
</NVFieldSelect>

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.

TypeDefault Value
RenderFragmentnull
This is an error
<NVFieldSelect Error>
  <ChildContent>
    <option value="value-1">label 1</option>
    <option value="value-2">label 2</option>
    <option value="value-3">label 3</option>
  <ChildContent>
  <NVFieldValidation>This is an <strong>error</strong></NVFieldValidation>
</NVFieldSelect>

Options

Array of options used for the select.
Need to be used with ForOptionValue/ForOptionLabel parameter.

TypeDefault Value
TValue[]?null
<NVFieldSelect
  @bind-Value="@_model.FieldOptionSelectModel"
  TValue="FieldOptionSelect"
  Placeholder="select a FieldOptionSelect"
  Options="@(_options)"
  ForOptionValue="@((item) => item?.Id)"
  ForOptionLabel="@((item) => item?.Name)"
  Label="FieldOptionSelect"
  Name="FieldOptionSelect" />  

@{
  private static FieldOptionSelect[] _options = new FieldOptionSelect[]
  {
    new() {Id = "FieldOptionSelect Id 1", Name = "FieldOptionSelect Name 1"},
    new() {Id = "FieldOptionSelect Id 2", Name = "FieldOptionSelect Name 2"},
    new() {Id = "FieldOptionSelect Id 3", Name = "FieldOptionSelect Name 3"}
  };
}

...

public class FieldOptionSelect
{
  public string Id { get; set; } = default!;
  public string Name { get; set; } = default!;
}

Placeholder

Placeholder define the placeholder value of the Select.

TypeDefault Value
stringnull
<NVFieldSelect Placeholder="This is a placeholder">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

PlaceholderValue

You can pass a value for the placeholder option.
By default the PlaceholderValue is an empty string.

TypeDefault Value
string
<NVFieldSelect 
  @bind-Value="_placeholder" 
  Placeholder="---placeholder---" 
  PlaceholderValue="-"
>
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>  

@code {
  private string _placeholder = "-";
}

Required

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

TypeDefault Value
boolfalse
<NVFieldSelect Required Label="Required" Name="Required">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>

Success

Set the field in State 'success'.

TypeDefault Value
boolfalse
Well done !
This is a hint
<NVFieldSelect Success Margin=". . 3">
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>
<NVFieldSelect  
  Success 
  Message="This is a hint" 
  Validation="Well done !"
>
  <option value="value-1">label 1</option>
  <option value="value-2">label 2</option>
  <option value="value-3">label 3</option>
</NVFieldSelect>
On this page