Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation Including Buttons, Icons, Input Fields & Much More..

Post Views: 1,786

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..

Don’t forget to check out:- A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS) Click Here For More Information

Lightning Web Component:- Input

  <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>

<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

 <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>

<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

  <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>

<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
)

  <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>

<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

  <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>

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>

<lightning-input type="color" name="input-color" label="Favorite color"></lightning-input>

</div>

An input field with a color picker that's set to a predefined value.

</h2>

<lightning-input type="color" name="input-color" label="Favorite color" value="#8DC141"></lightning-input>

</div>

Lightning Web Component:- File Input

  <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>

An input field with a file selector that accepts a single file.

</h2>

<lightning-input type="file" label="Attachment"></lightning-input>

</div>

An input field with a file selector that accepts multiple files.

</h2>

<lightning-input type="file" label="Attachments"></lightning-input>

</div>

A required input field with a file selector that accepts a single file.

</h2>

<lightning-input type="file" label="Attachment" required message-when-value-missing="Please upload a file"></lightning-input>

</div>

A disabled input field with a file selector. You cannot interact with a disabled field.

</h2>

<lightning-input type="file" label="Attachment" disabled></lightning-input>

</div>

An input field with a file selector that accepts a single PNG, JPG, or ZIP file.

</h2>

<lightning-input type="file" label="Attachment" accept="image/png, image/jpg, .zip"></lightning-input>

</div>

Lightning Web Component:- Text Input

  <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>

A text input field.

</h2>

<lightning-input type="text" label="Enter some text"></lightning-input>

</div>

A text input field with an initial value.

</h2>

<lightning-input type="text" label="Enter some text" value="ACME Inc."></lightning-input>

</div>

A text input field with placeholder text.

</h2>

<lightning-input type="text" label="Enter some text" placeholder="type here..."></lightning-input>

</div>

A text input field that is required.

</h2>

<lightning-input type="text" label="Enter some text" placeholder="type here..." required></lightning-input>

</div>

A text input field that is disabled.

</h2>

<lightning-input type="text" label="Enter some text" placeholder="type here..." disabled></lightning-input>

</div>

A text input field that is read-only.

</h2>

<lightning-input type="text" label="Enter some text" value="Stark Industries" readonly></lightning-input>

</div>

A text input field that requires a minimum of 6 characters.

</h2>

<lightning-input type="text" label="Enter some text" placeholder="type here..." minlength="6"></lightning-input>

</div>

A text input field that cannot have more than 10 characters.

</h2>

<lightning-input type="text" label="Enter some text" placeholder="type here..." maxlength="10"></lightning-input>

</div>

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

FAQ (Frequently Asked Questions)

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.

Author of w3web.net

Hi, This is Vijay 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

4 thoughts on “Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation Including Buttons, Icons, Input Fields & Much More.. | Find the developer guide library of lwc”

Joganiwellness

February 2, 2021 at 9:35 am

Nice Content
Jogani Wellness Therapies
manik goor

July 7, 2021 at 7:07 pm

very good content . Give us such as an amazing content
Fiona Xu

August 9, 2021 at 3:39 am

This is a really nice article
faizan wane

August 17, 2021 at 7:41 am

thanks for this informative knowledge

Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation Including Buttons, Icons, Input Fields & Much More.. | Find the developer guide library of lwc

What are LWC in Salesforce?

What is difference between aura and LWC?

How is LWC better than aura?

Related Topics | You May Also Like

Author of w3web.net

4 thoughts on “Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation Including Buttons, Icons, Input Fields & Much More.. | Find the developer guide library of lwc”

Leave a Comment Cancel reply