<lightning-radio-group name="radioGroup"
                          label="Radio Group"


import { LightningElement, track } from 'lwc';
import customCSS from '@salesforce/resourceUrl/customCSS';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

export default class RadioGroupBasic extends LightningElement {
    renderedCallback() {
                    loadStyle(this, customCSS);
    @track value = '';

    get options() {
        return [
            { label: 'Sales', value: 'option1' },
            { label: 'Force', value: 'option2' },

I made custom CSS file and uploaded it to static resources. and then applied It worked.


.customRadioCls .slds-form-element__control .slds-radio
    display: inline-block !important;
  • Keep in mind some inner elements of the out-of-the-box LWCs cannot be targeted with a parent stylesheet. Look at lightning-radio-group and see if there are any hooks provided by Salesforce for styling the component.
    – nbrown
    May 3, 2021 at 12:37

3 Answers 3


I've made a new component just for you - called RadioGroup

It has the standard slds formatting and can be configured to be horizontal or vertical using the orientation parameter


<c:radioGroup label="test" options="{!v.myoptions}" orientation="horizontal" value="Selected Value"/>

For completeness, basic structure is:

  <fieldset class="slds-form-element" >
    <legend class="slds-form-element__legend slds-form-element__label">{label}</legend>
    <div class="slds-form-element__control">

      <template for:each={options_} for:item="option">

        <span key={option.key} for:index={option.index} data-key={option.key} data-value={option.value} class={radioClass} onclick={handleClick}>
          <input type="radio" value={option.value}  name={name} checked={option.checked} disabled={option.disabled} class={option.inputClass}/>
          <label class="slds-radio__label" >
            <span class="slds-radio_faux"></span>
            <span class="slds-form-element__label">{option.label}</span>



So that I didn't need a special custom option component, I've used a class attribute to uniquely reference each option and get it's value from the click handler (I only do this because this is such a simple component - anything bigger I would make a RadioOption component)

Get it here

  • Hey, to whoever downvoted - this component was built before the official one existed. So hands off. Jul 3, 2022 at 18:11
  • Actually, this works!
    – Patlatus
    Jan 27 at 13:26
  • However, disabled attribute is ignored.
    – Patlatus
    Jan 27 at 14:22
  • Oh I see... I'll have a look and see what's going on. Jan 27 at 20:28
  • 1
    Merged. Thanks very much! Jan 30 at 16:41

Under Ligntning Builder CSS

enter image description here

/*Inline Radio Buttons*/
.radio-combo-inline .slds-form-element__control .slds-radio
    display: inline-block !important;

Add Above And Final use in HTML be looklike

<lightning-radio-group name="radioGroup"
                       label="Sort By"

Try using this formatting. It worked for me.

.slds-form-element__control .slds-radio{
  • looks like neither of the implementation works for me. Even when I use display:inline; it still arranges the options vertically
    – Patlatus
    Jan 27 at 13:02
  • @Patlatus doesn't mean using 'display:inline' property will work in all the scenarios if you already have other CSS properties implemented which will affecta the existing one. Feb 17 at 5:51
  • I don't have other CSS properties
    – Patlatus
    Feb 17 at 10:36
  • anyway, Caspar Harmer's answer actually worked for me.
    – Patlatus
    Feb 17 at 10:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .