I'm trying to display Radio Group horizontally in lwc, but it seems to be not applying my custom css

Question

HTML

<template>
    <lightning-radio-group name="radioGroup"
                          label="Radio Group"
                          options={options}
                          value={value}
                          type="radio"
                          class="customRadioCls"></lightning-radio-group>
</template>

JS

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

export default class RadioGroupBasic extends LightningElement {
    renderedCallback() {
                Promise.all([
                    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.

customCSS

.customRadioCls .slds-form-element__control .slds-radio
{
    display: inline-block !important;
}

Answer 1

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

Usage:

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

      </template>

    </div>
  </fieldset>

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

Answer 2

Under Ligntning Builder CSS

/*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"
                       options={sortBySelectionValues}
                       value={value}
                       class="radio-combo-inline"
                       type="radio"></lightning-radio-group>

Answer 3

Try using this formatting. It worked for me.

.slds-form-element__control .slds-radio{
display:inline;
}