How to align lightning-input form elements horizontally uses of slds-form-element_horizontal css and lightning-card tag in Lightning Web Component — LWC | How to create horizontal input label using slds-form-element/slds-form-element_horizontal style css property in LWC — Lightning Web Component Salesforce
Hey guys, today in this post we are going to learn about How to align lightning-input form elements horizontally uses of slds-form-element_horizontal css and lightning-card tag in Lightning Web Component — LWC.
A lightning-input component creates an HTML element. Use label-inline to horizontally align the label and input field. Use label-stacked to place the label above the input field.
If you’re creating forms to interact with Salesforce records, consider using lightning:recordForm or lightning:recordEditForm.
The label attribute is required. If you don’t want to display a label, specify the variant=”label-hidden” attribute. To know more details about lightning-input, Click Here →
Files we used to create horizontally form fields in LWC →
lwcHorizontalInputLabel.html
LWC HTML File
Template HTML file to create form fields horizontally in LWC
lwcHorizontalInputLabel.js
LWC JavaScript File
In the javascript file create import/export function in LWC
lwcHorizontalInputLabel.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.
lwcHorizontalInputLabelApp.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 : lwcHorizontalInputLabel.html
SFDX:Lightning Web Component >> New >> lwcHorizontalInputLabel.html
lwcHorizontalInputLabel.html [Lightning Web Component HTML]
Create Lightning Web Component JavaScript →
Step 2:- Create Lightning Web Component : lwcHorizontalInputLabel.js
SFDX:Lightning Web Component >> New >> lwcHorizontalInputLabel.js
lwcHorizontalInputLabel.js [LWC JavaScript File]
Create Lightning Web Component Meta XML →
Step 3:- Create Lightning Web Component : lwcHorizontalInputLabel.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcHorizontalInputLabel.js-meta.xml
lwcHorizontalInputLabel.js-meta.xml [LWC Meta Data XML]
Lightning Web Component Meta XML
Create Lightning Application →
Step 4:- Create Lightning Application : lwcHorizontalInputLabelApp.app
From Developer Console >> File >> New >> Lightning Application
lwcHorizontalInputLabelApp.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 1, 2022.
