Field Radio

Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Error

Set manually the field in 'error' state.

The Field need to receive a cascaded EditContext. The Error and ValidationMessage will be manage automatically by the EditContext.

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

Label

Label define the label value of the Radio Field.

TypeDefault Value
stringnull
<NVFieldRadio Name="Label" Label="This is a label"/>

LabelBefore

TypeDefault Value
boolfalse
<NVFieldRadio Name="LabelBefore" Label="This is a label" LabelBefore/>

LabelBeforeWidth

TypeDefault Value
stringnull
<NVFieldRadio Name="LabelBeforeWidth" Label="This is a label" LabelBefore LabelBeforeWidth="250px"/>

Message

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

TypeDefault Value
stringnull
This is a message
<NVFieldRadio Label="Message" Message="This is a message"/>

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>
    
</EditForm>

// 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>

NVFieldAfter

Add content after the 'input' element.

TypeDefault Value
RenderFragmentnull

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

<NVFieldRadio Name="FieldAfter" Label="FieldAfter">
  <NVFieldAfter>
    <NVText Size="xs" MT="2" TextColor="blue" Width="50%">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.
    </NVText>
  </NVFieldAfter>
</NVFieldRadio>

NVFieldBefore

Add content before the 'input' element.

TypeDefault Value
RenderFragmentnull

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

<NVFieldRadio Name="FieldBefore" Label="FieldBefore">
  <NVFieldBefore>
    <NVText Size="xs" MB="2" TextColor="blue" Width="50%">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.
    </NVText>
  </NVFieldBefore>
</NVFieldRadio>

NVFieldLabel

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

TypeDefault Value
RenderFragmentnull
<NVFieldRadio Name="FieldLabel">
  <NVFieldLabel>
    This is a <NVBlock Tag="strong" TextColor="error">label</NVBlock>
  </NVFieldLabel>
</NVFieldRadio>

NVFieldMessage

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

TypeDefault Value
RenderFragmentnull
This is a message 
<NVFieldRadio Name="FieldMessage" Label="FieldMessage">
  <NVFieldMessage>
    This is a <NVBlock Tag="strong" TextColor="error">message</NVBlock>
  </NVFieldMessage>
</NVFieldRadio>

Success

Set the field in State 'success'.

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

Value

Set the value of the radio button. When the radio is checked, this Value will be assigned to the RadioGroup Value

TypeDefault Value
T (generic type)null
<NVFieldRadioGroup Label="_value" @bind-Value="_value">
 <NVFieldRadio Label="Value 1" Value="@(1)"/>
 <NVFieldRadio Label="Value 2" Value="@(2)"/>
 <NVFieldRadio Label="Value 3" Value="@(3)"/>
</NVFieldRadioGroup>

@code {
  private int _value = 1;
}
On this page