1

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;
}
2
  • what exactly are you asking? – glls May 3 at 12:34
  • 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 at 12:37
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.