How to setup radiobutton as in the picture below?

[Ben Junior]

I saw this example on the demo page but I couldn't find any code on how to reproduce it. I mean, without the space between the circle and the label. Is it possible ? I don't care about the icon on the left (won't use it), but just no space would be great.

Thanks

Note: The reason for this is because I would be using it horizontally with a label with only one digit per item and it would be easier for the user to associate it with the proper button. I know I can alternatively increase the space between them, using its CssClass but it would become too large due to the number of items.

[Keerthikaran Venkatachalam]

Hi Ben,

Thank you for reaching out to Syncfusion Support.

By using the CSS style below, you can change the spacing between the radio button and label. However, you can adjust this CSS style according to your requirements. Please refer to the code snippets and sample provided below.

<div>

<SfRadioButton Label="Option 1" Name="options" Value="card" @bind-Checked="stringChecked"></SfRadioButton>

</div>

<div>

<SfRadioButton Label="Option 2" Name="options" Value="cash" @bind-Checked="stringChecked"></SfRadioButton>

</div>

 

@code {

    private string stringChecked = "cash";

}

<style>

    .e-radio+label .e-label {

        padding-left: 20px;

    }

</style>

Sample link: https://blazorplayground.syncfusion.com/VDLfXcNyygSkyZWj

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V