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

7,935 views

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.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

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 →

create form fields horizontally in lwc -- w3web.net
 

 

You can download file directly from github by Click Here.

 
 

Other related post that would you like to learn in Salesforce

 

  • Find the below steps ▾

 

Create Lightning Web Component HTML →

Step 1:- Create Lightning Web Component : lwcHorizontalInputLabel.html

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

SFDX:Lightning Web Component >> New >> lwcHorizontalInputLabel.html

lwcHorizontalInputLabel.html [Lightning Web Component HTML]

  1.   <template>
  2.     <div class="slds-p-around_large slds-form">
  3.  
  4.             <h3 class="slds-text-heading_medium"><lightning-icon icon-name="custom:custom104" size="small"></lightning-icon> <strong style="color:#270086; font-size:13px; margin-right:5px;"> Create horizontal input label in LWC  </strong> </h3>        
  5.         <br/>
  6.  
  7.         <lightning-card>
  8.             <div class="slds-form-element slds-form-element_horizontal">
  9.                 <label class="slds-form-element__label"><strong>Name</strong></label>
  10.                 <div class="slds-form-element__control">
  11.                     <lightning-input type="text"></lightning-input>
  12.                 </div>
  13.               </div>
  14.  
  15.               <div class="slds-form-element slds-form-element_horizontal">
  16.                 <label class="slds-form-element__label"><strong>Email</strong></label>
  17.                 <div class="slds-form-element__control">
  18.                     <lightning-input type="email"></lightning-input>
  19.                 </div>
  20.               </div>
  21.  
  22.               <div class="slds-form-element slds-form-element_horizontal">
  23.                 <label class="slds-form-element__label"><strong>Date</strong></label>
  24.                 <div class="slds-form-element__control">
  25.                     <lightning-input type="date" ></lightning-input>
  26.                 </div>
  27.               </div>
  28.  
  29.               <div class="slds-form-element slds-form-element_horizontal">
  30.                 <label class="slds-form-element__label"><strong>DateTime</strong></label>
  31.                 <div class="slds-form-element__control">
  32.                     <lightning-input type="datetime" ></lightning-input>
  33.                 </div>
  34.               </div>
  35.  
  36.               <div class="slds-form-element slds-form-element_horizontal">
  37.                 <label class="slds-form-element__label"><strong>Attachment</strong></label>
  38.                 <div class="slds-form-element__control">
  39.                     <lightning-input type="file"></lightning-input>
  40.                 </div>
  41.               </div>
  42.               <div class="slds-form-element slds-form-element_horizontal">
  43.                 <label class="slds-form-element__label"><strong>Basic Input Checkbox</strong></label>
  44.                 <div class="slds-form-element__control">
  45.                     <lightning-input type="checkbox" label="Basic option" name="input1"></lightning-input>
  46.                     <lightning-input type="checkbox" label="Required option" name="input2" checked required></lightning-input>
  47.                     <lightning-input type="checkbox" label="Disabled option" name="input3" checked disabled></lightning-input>
  48.                 </div>
  49.               </div>
  50.               <div class="slds-form-element slds-form-element_horizontal slds-m-top--large">
  51.                 <label class="slds-form-element__label"></label>
  52.                 <div class="slds-form-element__control">
  53.                   <lightning-button label="Submit" variant="brand"></lightning-button>
  54.                 </div>
  55.               </div>
  56.  
  57.         </lightning-card>
  58.  
  59.         <br/><br/>
  60.         <!--Start RelatedTopics Section-->
  61. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  62.  
  63.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  64.  
  65.             <br/><br/>
  66.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  67.             <div style="display:block; overflow:hidden;"> 
  68.                 <div style="width: 50%; float:left; display:inline-block">
  69.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  70.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  71.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  72.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  73.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  74.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  75.                     </ul>
  76.             </div>
  77.  
  78.             <div style="width: 50%; float:left; display:inline-block">
  79.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  80.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  81.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  82.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  83.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  84.                         <li><a href="https://www.w3web.net/tree-grid-dynamic-expand-collapse-in-lwc/" target="_blank" rel="noopener noreferrer">how to create tree grid with expanded/collapsed section for the entire row in LWC</a></li>
  85.                     </ul>
  86.                 </div>
  87.                <div style="clear:both;"></div> 
  88.                <br/>
  89.                 <div class="youtubeIcon">
  90.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  91.                 </div>
  92.     </div>
  93.  
  94. </div>
  95.  
  96.   <!--End RelatedTopics Section-->
  97.     </div> 
  98. </template>

 

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]

  1.    import { LightningElement } from 'lwc';
  2.  
  3.   export default class LwcHorizontalInputLabel extends LightningElement {}

 

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]

  1.   <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>45.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets> 
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.     </targets>
  10. </LightningComponentBundle>

 

Create Lightning Application →

Step 4:- Create Lightning Application : lwcHorizontalInputLabelApp.app

From Developer Console >> File >> New >> Lightning Application

lwcHorizontalInputLabelApp.app [Component Application File]

  1.   <aura:application extends="force:slds">
  2.   <c:lwcHorizontalInputLabel/>
  3. </aura:application>

 

create form fields horizontally in lwc -- w3web.net
 

Further post that would you like to learn in Salesforce

 

 

FAQ (Frequently Asked Questions)

How do you use a lightning input field?

Use the lightning-input-field component in lightning-record-edit-form to display and edit the value of a record field of a Salesforce object. Use the field-name attribute to specify the API field name.

What is difference between lightning input and lightning inputField?

lightning:input is to represent interactive controls that accept user input depending on the type attribute. lightning:inputField is to represent an editable input for a field on a Salesforce object.

What is lightning combobox?

lightning:combobox is an input element that enables single selection from a list of options. The result of the selection is stored as the value of the input. Multiple selection is currently not supported. To support multiple selection, use lightning:dualListbox instead.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration



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

Leave a Comment