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
178
questions
0
votes
1
answer
25
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} ...
- 651
0
votes
2
answers
41
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 -->
<...
- 1
0
votes
1
answer
43
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
43
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 ...
- 15
1
vote
1
answer
43
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 ...
- 15
0
votes
1
answer
87
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;
...
- 107
0
votes
1
answer
114
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
266
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://...
- 81
0
votes
0
answers
48
views
Lightning:input and Lightning:inputField are different alignment
I want to use both lightning:input and lightning:inputField in the same component but I cannot format these 2 input types into the same alignment even thought I'm using the same <div> tag. For ...
- 145
0
votes
1
answer
27
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=...
- 145
0
votes
0
answers
130
views
Change helptext icon color of lightning-input LWC
The issue Im facing is that I want to customize the color of the helptext associated with a lightning-input element in a Salesforce Lightning Web Component (LWC). Im looking for a way to change the ...
0
votes
1
answer
2k
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 ...
- 429
2
votes
0
answers
317
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 ...
- 877
0
votes
1
answer
434
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()...
- 25
1
vote
0
answers
594
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.
...
- 29
0
votes
1
answer
908
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="...
- 97
0
votes
1
answer
117
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
148
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 ...
- 97
2
votes
4
answers
4k
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}
...
- 551
0
votes
2
answers
1k
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 ...
- 16.1k
0
votes
0
answers
73
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
853
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
35
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
143
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
4k
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
761
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
513
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
2
votes
0
answers
3k
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....
- 163
1
vote
1
answer
1k
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,761
0
votes
1
answer
311
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
582
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=&...
- 689
0
votes
1
answer
633
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
651
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
243
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
578
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 ...
- 57
0
votes
1
answer
5k
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
2k
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
488
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
594
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=&...
- 361
0
votes
1
answer
397
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,439
1
vote
1
answer
781
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 ...
- 37
0
votes
0
answers
338
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 ...
- 847
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&...
- 39
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="...
- 39
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&...
- 335
0
votes
1
answer
42
views
Extra textbox before input component
It seems that there's an extra textbox that I can type into, but I'm not sure what's causing it in the code.
I only get to this extra textbox when tabbing through elements on the page.
I have added ...
- 25
0
votes
1
answer
2k
views
How to set maxlength for lightning-input-rich-text
How can we limit the number of characters entered in rich text field lightning field
<lightning-input-rich-text
value={myVal}>
</lightning-input-rich-text>
Is there any ...
- 133
1
vote
1
answer
426
views
Control binding for aura attribute being passed from parent to child
I am taking record id and object name as input from user
<aura:attribute name="recordidinput" type="Id" />
<aura:attribute name="objectname" type="...
-1
votes
1
answer
1k
views
LWC Html table with lightning-input onchange giving error
I have a html table in my LWC child component which is populated from the parent. I am able to pass the values and display the data on the child component. On the child component the table has a ...
- 11