2

I am using a multiselect picklist and displaying my options dynamically in an LWC using lighting-radio-group. E.g.

<template>
    <lightning-radio-group name="radioGroup" label="Radio Group"
             options={options} value={value} type="radio">
    </lightning-radio-group>
</template>
import { LightningElement } from 'lwc';

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

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

My issue is a client wants just the word Option to be bold and underlined and the remaining normal text. Is this possible? I created a multiselect picklist and am importing the values that way, but not sure if anyone is aware of any solutions where radio group required styling to only part of the label. Cheers.

1 Answer 1

1

Unfortunately, there's no way to style the individual labels to this level of specificity. You'd have to write your own component to deal with this. The typical starting point would be to look at the SLDS blueprint for a Radio Group, creating a custom component that mimics the behavior, or try and find an open-source base to start from, and then customize it to your desired behavior.

1
  • You could add a link to the source code of the component on Github. It's simple and has almost zero dependencies. Commented May 16 at 8:16

You must log in to answer this question.

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