How to create horizontal tabs uses of selected radio group button in Lightning Web Component — LWC | How to create radio group button functionality horizontal tabs uses of the “lightning-radio-group” selected value in LWC — Salesforce Lightning Web Component
Hey guys, today in this post we are going to learn about How to create Radio Group Button Functionality horizontal tabs uses of the “lightning-radio-group” selected value in LWC — Salesforce Lightning Web Component.
A lightning-radio-group component represents a group of radio buttons that permit only one button to be selected at a time. The component renders radio button “input” elements and assigns the same value to the name attribute for each element. The common name attribute joins the elements in a group. If you select any radio button in that group, any previously selected button in the group is deselected.
In general, we don’t recommend setting the name attribute in lightning-radio-group. The component automatically generates a unique value for name if none is provided. The generated value ensures a common name for the “input” elements rendered for the radio button group, and is unique in the page. To know more details about lightning-radio-group, Click Here →
Files we used to create Radio Group Button Functionality in LWC →
lwcCustomRadioButton.html
LWC HTML File
Template HTML file to create Radio Group Button Functionality in LWC
lwcCustomRadioButton.js
LWC JavaScript File
In the javascript file create handleRadioChange function in LWC
lwcCustomRadioButton.js-meta.xml
XML Meta File
It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage.
lwcCustomRadioButtonApp.app
Lightning Application
It is used to call the component to preview on browser.
Final Output → Get source code live demo..
Other related post that would you like to learn in LWC
Create Lightning Web Component HTML →
Step 1:- Create Lightning Web Component : lwcCustomRadioButton.html
SFDX:Lightning Web Component >> New >> lwcCustomRadioButton.html
lwcCustomRadioButton.html [Lightning Web Component HTML]
Create Lightning Web Component JavaScript →
Step 2:- Create Lightning Web Component : lwcCustomRadioButton.js
SFDX:Lightning Web Component >> New >> lwcCustomRadioButton.js
lwcCustomRadioButton.js [LWC JavaScript File]
Create Lightning Web Component Meta XML →
Step 3:- Create Lightning Web Component : lwcCustomRadioButton.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcCustomRadioButton.js-meta.xml
lwcCustomRadioButton.js-meta.xml [LWC Meta Data XML]
Lightning Web Component Meta XML
Create Lightning Application →
Step 4:- Create Lightning Application : lwcCustomRadioButtonApp.app
From Developer Console >> File >> New >> Lightning Application
lwcCustomRadioButtonApp.app [Component Application File]
Further post that would you like to learn in LWC FAQ (Frequently Asked Questions)
Final Output → Get source code live demo..
Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
Originally published at https://www.w3web.net on May 14, 2022.
