How to select lightning radio input in such a way that it deselects the other radiobuttons automatically

htmljavascriptlightning-web-components

Need help with fixing radiobuttion selection. In the image, you can see all buttons selected but only one button should be selected and others should be deselected automatically. with Standard HTML Input type radio, it works fine. But I want to try with Lightning Input radio button

Component Page

HTML CODE

Best Answer

You need to specify a name and value, just as you would in normal HTML.

<lightning-input name={item.id} type="radio" value={item.options.a}></lightning-input>

This will allow you to get the radio behavior, as well as tell which item is selected.

Note that the name must be the same for all type="radio" that should behave as a single radio selection, which is why I used item.id as the unique name. You can derive another name if you desire, just make sure they are unique on the page.

Demo.

Related Solutions

[SalesForce] how to get the value passed in value attribute of html Tag in controller

You have multiply ways to achieve it:

Use apex:selectRadio tag instead of html-input. You will then get the value of the variable into controller automatically. The Visualforce will do this job for you.
You can still use html-input but then you should implement a structure that will take this value to controller. For example apex:actionFunctiontogether with apex:param.

Example:

<apex:selectList id="chooseColor" value="{!Selected}" size="1">
    <apex:selectOption itemValue="1" itemLabel="Option 1"/>
    <apex:selectOption itemValue="2" itemLabel="Option 2"/>
</apex:selectList>

[SalesForce] How to extend the rich text input of lwc with custom buttons to add new commands

Chrome debugger of the component indicates, that the handler function has acccess to "this.quill" which makes available the quill API. Hence to format the current select with a button click as heading 1 with this.quill.format('header','h1');

The full code snipped then is

 customButtons = [
    {
        category: "FORMAT_TEXT",
        label: 'Format Text',
        buttons: [
            {
                value: 'like',
                label: 'Like',
                iconName: 'utility:like',
                format: 'like',
                handler: function () {
                    // format selection to be h1...
                    this.quill.format('header', 'h1'); 
                }
            }
        ]
    },

];

Best Answer

Related Solutions

[SalesForce] how to get the value passed in value attribute of html Tag in controller

[SalesForce] How to extend the rich text input of lwc with custom buttons to add new commands

Related Topic