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

Post Views: 202

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…

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>

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

Related Topics

Leave a Comment Cancel reply

Related Topics

Leave a Comment Cancel reply

Please Contribute to Support If Some Value Added in Your Project or Website