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;
}
Best Answer
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.