1

I'm trying to display Radio Group horizontally in lwc, but it seems to be not applying my custom css. 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';

export default class RadioGroupBasic extends LightningElement {
    @track value = '';

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

CSS:

.THIS .customRadioCls{
    display : inline-block !important;
}

In CSS I tried many variation like

.THIS.customRadioCls{
        display : inline-block !important;
    }

In inspect element I can display horizontally, by applying in standard class, but same is not working from css file.

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

This isn't possible because of CSS Isolation, a new feature in LWC. If you want a radio group that lays out horizontally, you'll have to write your own component.

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