In this post we will Find the Lightning Web component (LWC) UI Developer Guide, Component Reference and Aura Documentation including Buttons, Icons, Input Fields & Much More…
The Customizable Lightning Web Components to improve your users’ experience. Find free Salesforce Labs solutions that are right for you on AppExchange. Connect With Customers. Salesforce Admin Tools. Collaborate Better. To Learn More, Click Here..
Lightning Web Component:- Input
- Do you know:- The cheapest and best smartphone in your budget 2022?
1 2 3 4 5 6 7 8 9 10 11 |
<div class="slds-m-around_medium"> <h1 class="slds-text-heading_small">Input Date Example</h1> <p class="slds-text-body_regular">The following examples show various ways to create an input date component.</p> </div> <div> <h2>Basic Input Date</h2> <lightning-input type="date" name="input1" label="Enter a date" ></lightning-input> <lightning-input type="date" name="input2" label="Date field with a predefined value" value="2020-09-07"></lightning-input> <lightning-input type="date" name="input3" label="Date field with ISO8601 formatted value" value="2020-09-07T00:00:00Z"></lightning-input> <lightning-input type="date" name="input4" label="Date field with placeholder" placeholder="type here..."></lightning-input> </div> |
Aura Web Component:- Input Address
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<lightning-input-address address-label="Address" street-label="Street" city-label="City" country-label="Country" province-label="Province" postal-code-label="PostalCode" street="121 Spear St." city="San Francisco" country="US" province="CA" postal-code="94105" required field-level-help="Help Text for inputAddress field" ></lightning-input-address> |
Aura Web Component:- Input DateTime Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="slds-m-around_medium"> <h1 class="slds-text-heading_small">Input DateTime Example</h1> <p class="slds-text-body_regular">The following examples show various ways to create an input date/time component.</p> </div> <div> <h2>Basic Input Date Time</h2> <lightning-input type="datetime" name="input1" label="Enter a date/time value" ></lightning-input> <lightning-input type="datetime" name="input2" label="Date Time field with a predefined value" value="2020-09-12T18:13:41Z"></lightning-input> </div> <div> <h2>Advanced Input Date Time</h2> <lightning-input type="datetime" name="input3" label="Required Date Time field" required value="2020-09-12T18:13:41Z" ></lightning-input> <lightning-input type="datetime" name="input4" label="Disabled Date Time field" disabled value="2020-09-12T18:13:41Z" ></lightning-input> <lightning-input type="datetime" name="input5" label="Date Time field with min and max values" value="2020-09-12T18:13:41Z" min="2020-08-03T08:20:44Z" max="2020-09-25T22:33:44Z" ></lightning-input> </div> |
Lightning Web Component:- Time Input( Basic
)
1 2 3 4 5 6 7 8 |
<div class="slds-box"> <h2 class="header">Basic Input Time</h2> <lightning-input type="time" name="input1" label="Enter a time"></lightning-input> <lightning-input type="time" name="input2" label="Time field with a predefined value" value="18:30:00.000Z"></lightning-input> <lightning-input type="time" name="input3" label="Time field with placeholder" placeholder="type here..."></lightning-input> </div> |
Lightning Web Component:- Color Input
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> An input field with a color picker. Type a valid hex color value such as <code>#8DC141</code> or click the menu to select a color. </h2> <!-- Simple --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="color" name="input-color" label="Favorite color"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> An input field with a color picker that's set to a predefined value. </h2> <!-- Simple --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="color" name="input-color" label="Favorite color" value="#8DC141"></lightning-input> </div> </div> |
Lightning Web Component:- File Input
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 |
<div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> An input field with a file selector that accepts a single file. </h2> <!-- Single file --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="file" label="Attachment"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> An input field with a file selector that accepts multiple files. </h2> <!-- Multiple files --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="file" label="Attachments"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A required input field with a file selector that accepts a single file. </h2> <!-- Required --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="file" label="Attachment" required message-when-value-missing="Please upload a file"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A disabled input field with a file selector. You cannot interact with a disabled field. </h2> <!-- Disabled --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="file" label="Attachment" disabled></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> An input field with a file selector that accepts a single PNG, JPG, or ZIP file. </h2> <!-- Single file of restricted type --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="file" label="Attachment" accept="image/png, image/jpg, .zip"></lightning-input> </div> </div> |
Lightning Web Component:- Text Input
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 |
<div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field with an initial value. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" value="ACME Inc."></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field with placeholder text. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" placeholder="type here..."></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field that is required. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" placeholder="type here..." required></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field that is disabled. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" placeholder="type here..." disabled></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field that is read-only. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" value="Stark Industries" readonly></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field that requires a minimum of 6 characters. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" placeholder="type here..." minlength="6"></lightning-input> </div> </div> <div class="slds-m-top_medium slds-m-bottom_x-large"> <h2 class="slds-text-heading_medium slds-m-bottom_medium"> A text input field that cannot have more than 10 characters. </h2> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" placeholder="type here..." maxlength="10"></lightning-input> </div> </div> |
What are LWC in Salesforce?
Salesforce Lightning Web Components – lean user interface development. LWC is the Salesforce implementation of a new breed of lightweight frameworks built on web standards, which leverages custom elements, modules, shadow DOM, decorators, templates, and other new language.
What is difference between aura and LWC?
Aura-based Lightning components are built using both HTML and JavaScript, but LWC is built directly on the Web stack. A developer who works on LWC is not only using coding skills on a particular framework but in other frameworks like React or Angular, which are based on the Web Stack.
How is LWC better than aura?
While the Aura framework needed to implement a proprietary component model, proprietary language extensions, and proprietary modules, LWC uses web stack features implemented natively by browsers, which means that LWC apps are substantially more performant.
Related Topics | You May Also Like
- Your reaction of the article ▾
Nice Content
Jogani Wellness Therapies
Best Content
very good content . Give us such as an amazing content
This is a really nice article
thanks for this informative knowledge
very interesting and nice Article I like it.