Skip to main content
15 votes
Accepted

<lightning:input type="toggle"> how to set the slds-checkbox--on and the slds-checkbox--off span text

Use messageToggleActive and messageToggleInactive: <lightning:input name="x" label="x" type="toggle" messageToggleActive="Done" ...
sfdcfox's user avatar
  • 495k
14 votes
Accepted

readonly property of lightning:input not working

You may use attribute disabled instead of readonly. Here's an example with lightning:input [checkbox] and lightning:select: <div> Checkboxes <lightning:input type="checkbox" label="...
S..'s user avatar
  • 1,215
13 votes
Accepted

lightning:input (text) - is it possible to have multiple patterns

Use the "OR" operator (|): pattern="(\d{8}|[a-zA-Z0-9]{12}-\d{3})"
sfdcfox's user avatar
  • 495k
9 votes
Accepted

lightning:input Clear validation error messages

we had a similar requirement and the way we fixed it was to put the entire form inside an aura:if and changed the Boolean condition. this essentially meant the dom got re-created again but we were ...
RedDevil's user avatar
  • 7,821
8 votes
Accepted

<lightning:input type=“toggle”> how to set the label above the input component

Unfortunately, SLDS doesn't have a "toggle with label above" out of the box, so lightning:input doesn't really have a feature like this, either. However, you can simulate it with a few SLDS bits: <...
sfdcfox's user avatar
  • 495k
7 votes

Standard Lightning Layout in Lightning Component

You can use the lightning:layout and lightning:layoutItem to achieve the SLDS grid. <lightning:layout > <lightning:layoutItem > <lightning:input name="input1" label="First ...
Diana Widjaja's user avatar
7 votes
Accepted

Lightning:input type="file" change the "Upload Files" text

Try adding these lines to your Lightning Style: /* remove the "or drop files" label from the right of the lightning:input type file */ .THIS .slds-file-selector__dropzone .slds-file-selector__text{ ...
Tony Rush's user avatar
  • 290
7 votes
Accepted

How can I use Lightning:input focus on init?

This might just be a matter of dom load timing! There are couple of ways you can make it work. Adding a timer Using after renderer Adding a timer window.setTimeout( $A.getCallback(...
Hemavantha Rajesh Varma Mudunu's user avatar
6 votes
Accepted

Lightning:Input - Hide (Reset) Field Level Error message Enabled by using showHelpMessageIfInvalid()

If you really wanted to hide error messages you could do something like this: Component: <div> <lightning:input label="First Name" aura:id="firstName" required="true"/> <...
Christophe Coenraets's user avatar
6 votes
Accepted

Placing asterisk to to Lightning:input fields in LWC

You can use label-hidden variant and put label yourself: <template> <label>Middle Name</label> <abbr title="required" class="slds-required">**</abbr> <...
salesforce-sas's user avatar
6 votes

Change the color of Lightning-input label

On the assumption you are talking LWC rather than Aura (since you reference "lightning-input" rather than "lightning:input"), LWC specifically restricts the parent from messing with the child ...
Phil W's user avatar
  • 36.8k
5 votes

lightning:input type="radio" result binding

Sadly this isn't possible. you need: <lightning:input type="radio" name="select" value="{!v.colors[0]}" label="{!v.colors[0]}" onchange="{!c.handleRadioClick}" /> <lightning:input type="...
wellmstein's user avatar
  • 1,821
5 votes
Accepted

lightning:input style text-align:right;

As lightning:input gets converted into labels, divs and input elements in html while rendering in browser; updating to the below style selecting only the input element will make the text inside input ...
Saumya Ranjan Satapathy's user avatar
5 votes
Accepted

lightning:input checkbox label with url

I achieved the results by using HTML-Checkbox and traditional anchor tag combination. Lightning CMP <aura:attribute name="chkTerms" type="Boolean"/> <div> <input type="checkbox" ...
Mahmood's user avatar
  • 5,954
5 votes

Lightning:input type="date": how to change the date fomat - Summer'18

in Summer 19 SF add new attribute dateStyle for lightning:inpput date and datetime type fields link. in your case dateStyle="short" works for you <lightning:input aura:id="dob" type="date" name="...
sdandamud1's user avatar
  • 2,705
5 votes
Accepted

lightning:input type="file" not working

JSON.stringify will not work on files (Blob type). You should instead use FileReader. You can check some of sample code here You can use below to understand better: handleFileChange : function(...
salesforce-sas's user avatar
5 votes
Accepted

Regex for string but at least one character must be a number or letter

You'd just have to specify that there's a requirement of at least one letter or number somewhere in the string. Here's a possible solution: ^(\w| )*[0-9A-Za-z](\w| )*$ This says we must match zero ...
sfdcfox's user avatar
  • 495k
5 votes
Accepted

lightning-input of type "toggle" - any way to change the Inactive/Active text?

As per the documentation use the: message-toggle-active message-toggle-inactive Attributes on the lightning-input itself to define the text.
Phil W's user avatar
  • 36.8k
4 votes
Accepted

Pass text value of lookup to jscontroller

As documented in Working with Attribute Values in JavaScript try using: component.find('aura:id').get('v.value') Practical Example from the doc: component.cmp <aura:component> <...
glls's user avatar
  • 20.2k
4 votes
Accepted

Lightning:input type="date": how to change the date fomat - Summer'18

Updating answer : it need to be done with ui:input <ui:inputDate aura:id="EndDateField" value="" displayDatePicker="true" format="MM/dd/yyyy"/> formatting lightning input is not available. ...
Avijit Chakraborty's user avatar
4 votes

Lightning:input type="date": how to change the date fomat - Summer'18

There's not a way to specify the date format for date or datetime input fields lightning:input / lightning:inputField. This is meant to be controlled by the user's locale per the component library ...
James's user avatar
  • 2,649
4 votes
Accepted

Lightning Input datetime prevent value issue

Ok. Based on sanket's answer and finding that if a valid value is entered first, I have defaulted to value to the current date/time and now it works. Basically the issue only happened if the ...
Eric's user avatar
  • 54.2k
4 votes
Accepted

How to add lightning:input to lightning:recordEditForm

The best thing to do for your specific scenario is to 'hide' the lightning:inputField and add a lightning:input, similar to what Uwe Mentioned, however, you dont really need to do anything with the ...
glls's user avatar
  • 20.2k
4 votes
Accepted

lightning:input vertical alignment in table cell

Use <lightning:input variant="label-hidden"> to have lightning input without a space in front.
Ranga's user avatar
  • 1,722
4 votes

Lightning:input in Aura:iteration values aren't set

What's happening here is that the traditional two-way binding mechanism seems to be broken. If you put in default values (e.g. ['a','b','c']), you'll get those values instead. Or if you set it in an ...
sfdcfox's user avatar
  • 495k
4 votes

How to implement Auto-date functionality in the Lightning JS

You can simply use lightning:input together with its onchange attribute: <--! yourComponent.cmp --> <aura:component> <lightning:input name="customInput" maxlength="10" onchange="{!...
Oleh Berehovskyi's user avatar
3 votes
Accepted

How do you dynamically update lightning:input type?

The documentation doesn't say it outright, but it appears that lightning:input renders during its initial init method, which means that the attribute has to already be set by then. You need to ...
sfdcfox's user avatar
  • 495k
3 votes

Can we use lightning:input in production

BETA features in salesforce needs to be carefully evaluated on its implications if salesforce does not go with a GA of the product . The official docs specify below for any BETA feature As a beta ...
Mohith Shrivastava's user avatar
3 votes

Make lightning:inputRichText length longer

For LWC, per the documentation, you can add this to your LWC's css file to adjust height, :host { --sds-c-textarea-sizing-min-height: 600px; }
Vince's user avatar
  • 146
3 votes

Using lightning:input with type="number" and formatter="currency"

It looks like you already have the solution, I was able to accomplish this using the step attribute and setting it equal to 1. <lightning:input label="Input" type="number" formatter="currency" ...
byrner's user avatar
  • 81

Only top scored, non community-wiki answers of a minimum length are eligible