Field Radio Group

The FieldRadioGroup is the parent component used to control a bunch of FieldRadio.

Error

Set the field in 'error' state.

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

TypeDefault Value
boolfalse
This an error
<NVFieldRadioGroup Label="Error" @bind-Value="model.Error" Error="@HasError" Validation="@ValidationMessage">  
  <NVFieldRadio  
    Label="Error 1"
    Value="1"
  />
    <NVFieldRadio  
    Label="Error 2"
    Value="2"
  />
    <NVFieldRadio  
    Label="Error 3"
    Value="3"
  />
</NVFieldRadioGroup>

@code {
  private bool _error;
  
  public bool HasError {
    get { return true; }
    set { _error = value; }
  }
  
  private bool _success;
  
  public bool HasSuccess {
    get { return false; }
    set { _success = value; }
  }
  
  private string _validationMessage;
  
  public string ValidationMessage {
    get { 
      if(HasError) {
        return "this an error";
      }
      
      if(HasSuccess) {
        return "this a success";
      }
    }
  }
}

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
<NVFieldRadioGroup
  @bind-Value="model.OptionClass"
  Options="@_options"
  TValue="RadioOptionClass"
  ForOptionValue="@((item) => item!.Id)"
  ForOptionLabel="@((item) => item!.Label)"
  Label="OptionClass" 
/>

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

...

public class RadioOptionClass
{
  public string Id { get; set; } = default!;
  public string Label { 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
<NVFieldRadioGroup
  @bind-Value="model.OptionClass"
  Options="@_options"
  TValue="RadioOptionClass"
  ForOptionValue="@((item) => item!.Id)"
  ForOptionLabel="@((item) => item!.Label)"
  Label="OptionClass" 
/>

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

...

public class RadioOptionClass
{
  public string Id { get; set; } = default!;
  public string Label { get; set; } = default!;
}

Label

Label define the label value of the Radio Field.

TypeDefault Value
stringnull
<NVFieldRadioGroup Label="Label" @bind-Value="model.Label">  
  <NVFieldRadio Label="Label 1" Value="1"/>
  <NVFieldRadio Label="Label 2" Value="2"/>
  <NVFieldRadio Label="Label 3" Value="3"/>
</NVFieldRadioGroup>

LabelBefore

TypeDefault Value
boolfalse
<NVFieldRadioGroup
  @bind-Value="model.OptionClass"
  Options="@_options"
  TValue="RadioOptionClass"
  ForOptionValue="@((item) => item!.Id)"
  ForOptionLabel="@((item) => item!.Label)"
  Label="OptionClass" 
  LabelBefore
/>

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

...

public class RadioOptionClass
{
  public string Id { get; set; } = default!;
  public string Label { get; set; } = default!;
}

LabelBeforeWidth

TypeDefault Value
stringnull
<NVFieldRadioGroup
  @bind-Value="model.OptionClass"
  Options="@_options"
  TValue="RadioOptionClass"
  ForOptionValue="@((item) => item!.Id)"
  ForOptionLabel="@((item) => item!.Label)"
  Label="OptionClass"
  LabelBefore
  LabelBeforeWidth="250px" 
/>

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

...

public class RadioOptionClass
{
  public string Id { get; set; } = default!;
  public string Label { get; set; } = default!;
}

Message

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

TypeDefault Value
stringnull
This is a hint message. 
<NVFieldRadioGroup Label="Message" @bind-Value="model.Label" Message="This is a hint message.">  
  <NVFieldRadio Label="Label 1" Value="1"/>
  <NVFieldRadio Label="Label 2" Value="2"/>
  <NVFieldRadio Label="Label 3" Value="3"/>
</NVFieldRadioGroup>

Name

Name defined the RadioInputGroup associated to the value when checked.
If you do not pass a Name to the FieldRadio, the name will be provided by the FieldRadioContext provided by the FieldRadioGroup.

TypeDefault Value
stringnull
<EditForm Model="model">
  <DataAnnotationsValidator />
  
  <NVFieldRadioGroup Label="FirstUniqueName" @bind-Value="model.FirstUniqueName">
    // the Name will be provided by the FieldRadioContext cascaded by the FieldRadioGroup. 
    // Here from FieldIdentifier.FieldName -> FirstUniqueName
    <NVFieldRadio Label="First label" Value="1"/> 
    <NVFieldRadio Label="Second label" Value="2"/>
    <NVFieldRadio Label="Third label" Value="3"/>
  </NVFieldRadioGroup>
  
  // the Name will be provided by the FieldRadioContext cascaded by the FieldRadioGroup. 
  // Here from Name -> MySecondUniqueName
  <NVFieldRadioGroup Name="MySecondUniqueName" @bind-Value="model.SecondUniqueName" MT="8">
    <NVFieldRadio Label="First label" Value="1"/> 
    <NVFieldRadio Label="Second label" Value="2"/>
    <NVFieldRadio Label="Third label" Value="3"/>
  </NVFieldRadioGroup>

  // the Name will be provided by the FieldRadioContext cascaded by the FieldRadioGroup. 
  // Here from _autoname -> an hash string computed on the instantiation of the component.
  <NVFieldRadioGroup @bind-Value="model.ThirdUniqueName" MT="8">
    <NVFieldRadio Label="First label" Value="1"/> 
    <NVFieldRadio Label="Second label" Value="2"/>
    <NVFieldRadio Label="Third label" Value="3"/>
  </NVFieldRadioGroup>
    
</EditForm>

NVFieldAfter

Add content after the 'input' element.

TypeDefault Value
RenderFragmentnull

Field After

<NVFieldRadioGroup Label="FieldAfter" @bind-Value="model.FieldAfter">  
  <ChildContent>
    <NVFieldRadio Label="FieldAfter 1" Value="1"/>
    <NVFieldRadio Label="FieldAfter 2" Value="2"/>
    <NVFieldRadio Label="FieldAfter 3" Value="3"/>
  </ChildContent>
  
  <NVFieldAfter>
    <NVText Size="sm" TextColor="blue">Field After</NVText>
  </NVFieldAfter>
</NVFieldRadioGroup>

NVFieldBefore

Add content before the 'input' element.

TypeDefault Value
RenderFragmentnull

Field Before

<NVFieldRadioGroup Label="FieldBefore" @bind-Value="model.FieldBefore">  
  <ChildContent>
    <NVFieldRadio Label="FieldBefore 1" Value="1"/>
    <NVFieldRadio Label="FieldBefore 2" Value="2"/>
    <NVFieldRadio Label="FieldBefore 3" Value="3"/>
  </ChildContent>
  
  <NVFieldBefore>
    <NVText Size="sm" TextColor="blue">Field Before</NVText>
  </NVFieldBefore>
</NVFieldRadioGroup>

NVFieldLabel

Label define the content of the label of the Radio Field.

TypeDefault Value
RenderFragmentnull
<NVFieldRadioGroup Label="FieldLabel" @bind-Value="model.FieldLabel">  
  <ChildContent>
    <NVFieldRadio Label="FieldLabel 1" Value="1"/>
    <NVFieldRadio Label="FieldLabel 2" Value="2"/>
    <NVFieldRadio Label="FieldLabel 3" Value="3"/>
  </ChildContent>
  
  <NVFieldLabel>
    <NVBlock Tag="span" TextColor="blue">Field Label</NVBlock>
  </NVFieldLabel>
</NVFieldRadioGroup>

NVFieldMessage

Label define the content of the label of the Radio Field.

TypeDefault Value
RenderFragmentnull

Field Message

<NVFieldRadioGroup Label="FieldMessage" @bind-Value="model.FieldMessage">  
  <ChildContent>
    <NVFieldRadio Label="FieldMessage 1" Value="1"/>
    <NVFieldRadio Label="FieldMessage 2" Value="2"/>
    <NVFieldRadio Label="FieldMessage 3" Value="3"/>
  </ChildContent>
  
  <NVFieldMessage>
    <NVText Size="400" TextColor="blue">Field Message</NVText>
  </NVFieldMessage>
</NVFieldRadioGroup>

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 with html markups. 

<NVFieldRadioGroup Label="NVFieldValidation" @bind-Value="model.Error" Error="@HasError" Validation="@ValidationMessage">
  <NVFieldValidation>
    <NVText Color="error">
      This is an error with <strong>html  markups</strong>.
    </NVText>
  </NVFieldValidation>  
  <ChildContent>  
    <NVFieldRadio  
      Label="Error 1"
      Value="1"
    />
    <NVFieldRadio  
    Label="Error 2"
    Value="2"
    />
    <NVFieldRadio  
    Label="Error 3"
    Value="3"
    />
  </ChildContent>
</NVFieldRadioGroup>

@code {
  private bool _error;
  
  public bool HasError {
    get { return true; }
    set { _error = value; }
  }
  
  private bool _success;
  
  public bool HasSuccess {
    get { return false; }
    set { _success = value; }
  }
  
  private string _validationMessage;
  
  public string ValidationMessage {
    get { 
      if(HasError) {
        return "this an error";
      }
      
      if(HasSuccess) {
        return "this a success";
      }
    }
  }
}

Options

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

TypeDefault Value
TValue[]?null
<NVFieldRadioGroup
  @bind-Value="model.OptionClass"
  Options="@_options"
  TValue="RadioOptionClass"
  ForOptionValue="@((item) => item!.Id)"
  ForOptionLabel="@((item) => item!.Label)"
  Label="OptionClass" 
/>

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

...

public class RadioOptionClass
{
  public string Id { get; set; } = default!;
  public string Label { get; set; } = default!;
}

Required

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

TypeDefault Value
boolfalse
<NVFieldRadioGroup Label="Required" Required @bind-Value="model.Required">  
  <NVFieldRadio  
    Label="Required 1"
    Value="1"
  />
    <NVFieldRadio  
    Label="Required 2"
    Value="2"
  />
    <NVFieldRadio  
    Label="Required 3"
    Value="3"
  />
</NVFieldRadioGroup>

Stack

You can use Stack parameters to display the Field Radio on a line. Combined with the Gutter parameter you can change the distance between the FieldRadio.

TypeDefault Value
boolfalse
<NVFieldRadioGroup @bind-Value="model.Stack" Stack Gutter="8">  
  <NVFieldRadio  
    Label="Stack 1"
    Value="1"
    WhiteSpace="@WhiteSpace.NoWrap"
  />
    <NVFieldRadio  
    Label="Stack 2"
    Value="2"
    WhiteSpace="@WhiteSpace.NoWrap"
  />
    <NVFieldRadio  
    Label="Stack 3"
    Value="3"
    WhiteSpace="@WhiteSpace.NoWrap"
  />
</NVFieldRadioGroup>

Success

Set the field in State 'success'.

TypeDefault Value
boolfalse
This a success
<NVFieldRadioGroup Label="Error" @bind-Value="model.Success" Success="@HasSuccess" Validation="@ValidationMessage">  
  <NVFieldRadio  
    Label="Error 1"
    Value="1"
  />
    <NVFieldRadio  
    Label="Error 2"
    Value="2"
  />
    <NVFieldRadio  
    Label="Error 3"
    Value="3"
  />
</NVFieldRadioGroup>

@code {
  private bool _error;
  
  public bool HasError {
    get { return false; }
    set { _error = value; }
  }
  
  private bool _success;
  
  public bool HasSuccess {
    get { return true; }
    set { _success = value; }
  }
  
  private string _validationMessage;
  
  public string ValidationMessage {
    get { 
      if(HasError) {
        return "this an error";
      }
      
      if(HasSuccess) {
        return "this a success";
      }
    }
  }
}
On this page