Radio within table rows

[Rocky-25]

Is it possible to use the radio/radio group components within a table so each table row has a radio at the start and you can select only one row?

Example html that I've tried;

<FluentRadioGroup @bind-Value=Content.SelectedOption>
  <table>
      <thead>
          <tr>
              <th>&nbsp;</th>
              <th>First name</th>
              <th>Surname</th>
              <th>Age</th>
              <th>Address</th>
          </tr>
      </thead>
  
      <tbody>
          @foreach (var item in Content.Items)
          {
              <tr>
                  <td><FluentRadio Value=@item></FluentRadio></td>
                  <td>@item.FirstName</td>
                  <td>@item.Surname</td>
                  <td>@item.Age</td>
                  <td>@item.Address</td>
              </tr>
          }
      </tbody>
  </table>
</FluentRadioGroup>

But this allows more than one radio to be selected and doesn't seem to bind to the value in the radio group.

[vnbaaij]

Not out of the box no. The table row and the checkbox do not have any 'connection' to each other. A specific component would need to be built for that.

[ggomarighetti]

Try like this, its only an example

<FluentRadioGroup @bind-Value=Content.SelectedOption>
  <table>
      <thead>
          <tr>
              <th>&nbsp;</th>
              <th>First name</th>
              <th>Surname</th>
              <th>Age</th>
              <th>Address</th>
          </tr>
      </thead>
  
      <tbody>
          @foreach (var item in Content.Items)
          {
              <tr @onclick="() => Content.SelectedOption = item">
                  <td><FluentRadio Value=@item></FluentRadio></td> 
                  <td>@item.FirstName</td>
                  <td>@item.Surname</td>
                  <td>@item.Age</td>
                  <td>@item.Address</td>
              </tr>
          }
      </tbody>
  </table>
</FluentRadioGroup>

[Rocky-25]

Thanks for this suggestion. It's close and does select the correct option but once clicked the radio buttons stay selected when clicking a different option.

[vnbaaij]

That is probably because they are not part of a RadioGroup