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 →
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
SFDX:Lightning Web Component >> New >> lwcHorizontalInputLabel.html
lwcHorizontalInputLabel.html [Lightning Web Component HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<template> <div class="slds-p-around_large slds-form"> <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> <br/> <lightning-card> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>Name</strong></label> <div class="slds-form-element__control"> <lightning-input type="text"></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>Email</strong></label> <div class="slds-form-element__control"> <lightning-input type="email"></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>Date</strong></label> <div class="slds-form-element__control"> <lightning-input type="date" ></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>DateTime</strong></label> <div class="slds-form-element__control"> <lightning-input type="datetime" ></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>Attachment</strong></label> <div class="slds-form-element__control"> <lightning-input type="file"></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal"> <label class="slds-form-element__label"><strong>Basic Input Checkbox</strong></label> <div class="slds-form-element__control"> <lightning-input type="checkbox" label="Basic option" name="input1"></lightning-input> <lightning-input type="checkbox" label="Required option" name="input2" checked required></lightning-input> <lightning-input type="checkbox" label="Disabled option" name="input3" checked disabled></lightning-input> </div> </div> <div class="slds-form-element slds-form-element_horizontal slds-m-top--large"> <label class="slds-form-element__label"></label> <div class="slds-form-element__control"> <lightning-button label="Submit" variant="brand"></lightning-button> </div> </div> </lightning-card> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <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> <br/><br/> <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> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <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> <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> <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> <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> <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> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <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> <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> <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> <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> <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> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <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> </div> </div> </div> <!--End RelatedTopics Section--> </div> </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 2 3 |
import { LightningElement } from 'lwc'; 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 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Create Lightning Application →
Step 4:- Create Lightning Application : lwcHorizontalInputLabelApp.app
From Developer Console >> File >> New >> Lightning Application
lwcHorizontalInputLabelApp.app [Component Application File]
|
1 2 3 |
<aura:application extends="force:slds"> <c:lwcHorizontalInputLabel/> </aura:application> |
Further post that would you like to learn in Salesforce
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
how to set/get required value of ‘Radio Group’ & ‘Radio Group Button Type’ and display selected value as enabled/disabled or selected/deselected horizontally uses of ‘lightning-checkbox-group’ tags in lightning web component – LWC Salesforce | How to change the lightning-radio-group selected value as checked/unchecked and set default selected radio button in Salesforce LWC (Lightning Web Component)
How to create a custom horizontal tabs as dynamically changed uses of scoped lightning:tabset in Lightning Web Component — LWC | How to create horizontal tabs in lwc
How to remove/put the extra space between label and lightning-input field Uses of Style CSS property in LWC – Lightning Web Component | How to reduce space horizontally between label and input using Style CSS property in Lightning Web Component – LWC
Create custom vertical tabs as responsive design & dynamically changed uses of lightning-tabset in Lightning Web Component — LWC | How to create custom vertical tabs dynamic changed in lwc
Use the template if:true|false conditions and displaying account fields uses of “lightning-record-edit-form” Data Service in Lightning Web Component — LWC | How to display account fields uses of data service in lwc
How to displays a horizontal dynamic progress bar from left to right when you click a Start/Stop button uses of lightning-progress-bar element in lightning web component — LWC | How to create dynamic progress bar in lwc
How to add custom style css and change the text color & text size through JavaScript in lightning web component – LWC | how to add custom style css in lwc
LWC regex pattern expression on custom form validation for Phone, Email & Pincode on click submit button Uses of “lightning-input” elements in Salesforce Lightning Web Component – LWC | How to apply regex patterns for Email, Phone & Pincode on custom form validation and clear input field on button click in Salesforce LWC
- Your reaction of the article ▾
Author of w3web.net
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