Questions tagged [lightninginput]
Custom lightning input field can take on different display characteristics depending on 'type' property. A lightning-input component creates an HTML <input> element. This component supports the following input types: checkbox checkbox-button date datetime time email file password search tel url number text (default) toggle
182
questions
0
votes
3
answers
2k
views
How to remove expected date format in lightning-input element?
EDIT: This is a duplicate question. Answer here if you have a good answer: lightning-input type date, hide date format below the field
With the Winter '25 release there is an update that adds the ...
- 7,015
7
votes
3
answers
4k
views
lightning-input type date, hide date format below the field
NOTE: THE QUESTION DISCUSSES ONE FEATURE THAT IS IN WINTER '25
Today one of the Sandbox I am working on got updated to Winter '25. With these come some changes to LWC components. The one I just ...
- 859
0
votes
0
answers
22
views
Lightning-input type="time" resets time value on blur
I have the following simple code, no events wired at all, simply dropping this on an LWC template...
<lightning-input
data-id="startTimeNew"
type="time"
variant="...
- 139
1
vote
1
answer
146
views
Stopping the up and down arrow keys incrementing numeric fields in an LWC?
I have this input field and want to make the up and down arrow keys not do the default increment/decrement by one as I want to use those keys for some higher level navigation instead:`
<lightning-...
- 137k
1
vote
0
answers
120
views
Searchable Combobox how to avoid gap between lightning-input and listbox
I have developed a searchable combobox as a LWC and everything is working fine, except that there is a little gap between the lightning-input component and the listbox. What do I need to do, do get ...
- 152
0
votes
0
answers
129
views
lightning-input reportValidity does not fire on button click
I have these lightning-input components. The error does not show when the user leaves it empty and clicks on Next button. Also I have two input components here, is there a way I could check the ...
- 821
0
votes
1
answer
284
views
Remove checkmark from LWC lightning-input toggle
Is there a way to remove the checkmark when the toggle is in the checked state?
This is what I have on my HTML -
<lightning-input type="toggle" name="test" data-id={testId} ...
- 821
0
votes
2
answers
95
views
I am trying to fetch Account details with the text provided in lightning input lwc
I am trying to fetch the Account Name and Id while entering the text on ligtning input but I am not able to fetch the data from apex here is my code.Pleas help
<!-- mySearchListDemo.html -->
<...
- 13
0
votes
1
answer
60
views
Lightning-Input type=date unable to replicate error
We have a lightning-input field, type=date, that has an onchange attribute to do some javascript logic. The logic works about 75% of the time and we can't figure out why. Please assume all things ...
- 11
0
votes
1
answer
335
views
Aura Decimal Input value to match number field limit 16,2
I am trying to limit my input number field to exactly match the field values which are 16 digits to 2 decimal digits. Also I want to prevent user from putting something different into the field like a ...
- 27
1
vote
1
answer
168
views
LWC : Issue on invalid input or characters onKeyDown
On console logs when toggle switch this.isToggled is false, onKeyDown this.inputPattern became [a-zA-Z]* which is correct. I shouldn't be able to type any number when this.isToggled = false. But I can ...
- 25
0
votes
1
answer
329
views
lightning-input type="datetime" does not hold the time value at first time in the UI
When I select the time first in the date time field it does not hold the value and when I do the same again and select the time first it holds it. Below is my code :
JS :
@api endDateTime = null;
...
- 119
0
votes
1
answer
313
views
is there a way to get min and max attribute in a lightning:input in js controller in aura component
<lightning:input type="number" name="min_perc" aura:id="required" required="true" class="label-text minPerc" min="0" max="99" ...
- 11
1
vote
1
answer
563
views
Replicate border focus behavior lightning input
I'm using this repository because I needed a multi select combobox like this and works fine except the input is not a lightning-input so it doesn't have the blue border focus like this:
https://...
- 83
0
votes
1
answer
63
views
How can I get an element component in aura:iteration
I have an aura:iteration like this:
<aura:iteration items="{!v.lsFactorItems}" var="item">
<div class="slds-grid slds-wrap">
<lightning:input
aura:id=...
- 165
1
vote
1
answer
3k
views
Difference between lightning-file-upload and lightning-input type="file"
I am using PapaParse to parse my CSV file and the function is expecting the parameter which is the File object.
When I use lightning-input type=file the function is working but the file collected ...
- 493
2
votes
0
answers
631
views
How can I give a disabled `lightning-input` a background color?
I have successfully given enabled lightning-input fields in my app background colors using --slds-c-input-color-background, but this seems to be ignored (removed) from the final page rendering. How ...
- 1,017
0
votes
1
answer
725
views
setCustomValidity() working only on first row of dynamic table lightning
I have a requirement where I need to dynamically add/remove table rows and add custom validation on each row in LWC.
I achieved dynamically adding and deleting rows but while adding setCustomValidity()...
- 77
3
votes
0
answers
1k
views
Lightning-input vs lightning-input-field
I am facing issues with using both Lightning-input and lightning-input-field. Some of my requirements are satisfied with Lightning-input and some with lightning-input-field.Here are issues faced.
...
- 59
0
votes
1
answer
2k
views
Change label colour lightning-input LWC
Hello guys I am trying to change the label colour of a lightning-input in a Community that has a green default colour. I tried this approach:
<lightning-combobox label="Item" class="...
- 117
0
votes
1
answer
191
views
Help disabling calendar pop up
My client wants to use the date type on a lightning:input component, but wants the date picker calendar disabled.
I have tried toying with the CSS, but that really isn't my strength. They're unwilling ...
- 11
0
votes
1
answer
191
views
avoid deleting all files LWC
Hello I am working on a lightning-input field whose type is a file. In this component I want to allow the users to upload several files and show its name and an option to delete the selected file the ...
- 117
2
votes
4
answers
7k
views
How to prevent LastPass from displaying icon inside lightning-input
Based on this LastPass guidance I've tried data-lpignore and data-lpignore="true", per this markup:
<lightning-input
if:true={colmod.showme}
required={colmod.required}
...
- 619
0
votes
2
answers
2k
views
Why lightning:input type=number is no longer rendered as input type=number?
Why lightning:input type=number is no longer rendered as input type=number?
Earlier, when we were using <lightning:input type=number/>, it was rendering as <input type=number> and was ...
- 17.5k
0
votes
0
answers
101
views
Applying simultaneous filters to datatable
I have four LWC components: - A datatable that displays data - An input text field - A dual listbox - Another dual listbox
I need to make input field and both dual listbox work as simultaneous filters ...
1
vote
1
answer
1k
views
'Upload files or drop files' to 'Upload file or drop file'
How can I change the 'Upload files or drop files' text to 'Upload file or drop file'.
When I am allowing single file upload in lightning-input component.
0
votes
1
answer
38
views
Cannot get data in HTML
With this code, I get my data, it is visible in the console, however I think I made an error in HTML because I can't display anything, a little help please Please on how to fix this, I want to display ...
- 11
0
votes
0
answers
175
views
slds-input css doesn't work
Hello guys I have a doubt related with Lighning-input style.
I'm trying to align the value inside the textbox to the right but it seems that my css is ignored by Salesforce.
I have the following HTML:
...
1
vote
2
answers
7k
views
LWC get element by value
Why can't I get element by value? I have tried to get id with var, just data and different quotes.
//var = id;
<lightning-input value={var}></lightning-input>
this.template.querySelector(&...
- 25
0
votes
1
answer
984
views
How to retain user-input in lightning input field
I created an LWC in which I have 3 parts on a page: (here Allergy & Medication are visible).
1st page has 2 input fields, and to view each part of the page, a boolean variable is used (template ...
0
votes
0
answers
757
views
WYSIWYG editor in Lwc
I have tried using lightning-input-rich-text component to create a WYSIWYG in LWC but given its issues with table (hitting backspace on table content deletes whole table) and image (unable to resize ...
- 106
4
votes
1
answer
5k
views
LWC lightning-input Currency
In Lightning Web Components (LWC) the 'lightning-input' component supports a 'formatter' attribute which has value 'currency' and this displays decimal values with currency formatting, for example:
1....
- 190
1
vote
1
answer
2k
views
change even on datetime input field does not track time
I am using a datetime input field in LWC:
<lightning-input type="datetime" name="input5" label="ADate Time" value={avlue} min={minEndDate} max={maxEndDate} onchange=...
- 4,839
0
votes
1
answer
686
views
Search input bar layout
I'm trying to use a lightning input type search to make a search bar that I will connect to a database to search throught all my items (but this is not the problem)
I would like to show the search bar ...
- 19
0
votes
1
answer
839
views
lightning-input checkbox - getting checked rows when submitted
When submit button is clicked, how do I know which rows have been checked?
.html
<template for:each={products.data} for:item="product">
<a
href=&...
- 741
0
votes
1
answer
992
views
Date format in lightning-input after changed input value format
An issue in Date format validation in lightning-input type Date: After I changed the input value format according to the latest Salesforce updated ICU locale format for Ireland.
The last column shows ...
- 3
0
votes
1
answer
830
views
How to insert image into lightning-input-rich-text programmatically?
I have an image in base64 format and I want to push the image data explicitly into my lightning-input-rich-text. Is there any way?
My code looks like this:
<lightning-input-rich-text
value={...
0
votes
1
answer
337
views
What is the use of messageWhenTooLong function in lightning input or textarea
What is the use of messageWhenTooLong function in lightning input or textarea.
In practice, the lightning-input element appears to prevent the user from entering any characters beyond the number ...
-2
votes
1
answer
695
views
Concatenate Label with static text and dynamic vales
I have a lightning input where I'd like to create a dynamic label. When I deploy this component I don't have any errors; however, the UI displays "Please enter the {item.fieldValue}" in the ...
- 67
0
votes
1
answer
7k
views
Lightning input of type text in LWC accepts blank space as input when set to required - how to get rid of it
<lightning-input type="text" name="masterLabel" class="validate" label="Enter the Master Label" value={masterLabelValue} onchange={handleMasterLabelChange} ...
- 3
0
votes
1
answer
3k
views
Lightning input Toggle - LWC [closed]
I’m working with multiple toggles in a template for bucle and I’m trying to find a way to identify the specific toggle that is enabled/disabled, I can’t use something like this:
this.template....
0
votes
0
answers
537
views
How to display different input types(checkbox radio text) according to the user's preference in lwc
This is the current preview of my app where when i click a particular survey the corresponding question and answer is displayed.I want to modify the answers in such a way that answer type can be ...
user106813
0
votes
0
answers
708
views
select lightning input checkbox by name in aura
I want to select the lightning input checbox by name from my Aura component controller. How can I do that?
<lightning:input type="checkbox" label="{!parentBenefit.Name}" name=&...
- 373
0
votes
1
answer
593
views
Unable to set required attribute for lightning input
I'm currently looking to change the required attribute based on multiple scenarios.
So, I have a created input field with the required attribute as newAccRequire but by default, it's getting the true ...
- 1,460
1
vote
1
answer
1k
views
Force capital letters in a lightning-input element
Is there any way to capitalize the letters from a lightning-input (type text) in html?
I'm using this in a lightning-datatable and when a use insert a lowercase field, it's sorted before the capital ...
- 59
0
votes
0
answers
406
views
Is there a way to pass sobject record from html to lwc on radio button change
I am displaying list of contacts in table in lwc. I have a radio button placed in each row of the table. On clicking that, I'm able to send the contact record id but I want to send that particular ...
- 1
0
votes
1
answer
2k
views
Lightning Input with: Read Only but with Borders
I have a Lightning component with a form. This form has some fields as Read Only and some others editable. I use Lightning input with the property readonly.
The issue is that on the ones that are ...
- 917
0
votes
1
answer
1k
views
How to make https optional in lightning input type url in lwc
I want to make https or http optional in my url type input field. But I always get invalid format error. I've tried regex pattern as well, but no luck.
HTML Code:
<lightning-input type="url&...
- 49
0
votes
1
answer
1k
views
How to make input element read only on button click
<lightning-input value={value} class="slds-p-horizontal--xx-small" variant="label-hidden"></lightning-input>
<lightning-input type="number" name="...
- 49
0
votes
1
answer
2k
views
Lightning:input required="true" is not working [closed]
I'm using a required field for an aura component that should does not save a record if any of required fields is missing.
This is my input:
<lightning:input aura:id="test" name="test&...
- 365