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

Post Views: 592

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 Sitemap to Find all Published Post of The Tutorial w3web.net 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

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

Related Topics | You May Also Like

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

Leave a Comment Cancel reply