Mastering Lightning Web Components: A Guide to All Essential Lightning Tags

Mastering Lightning Web Components: A Guide to All Essential Lightning Tags

            Lightning Web Components (LWC) allow developers to build interactive and dynamic user interfaces on the Salesforce platform. Salesforce provides a set of standard lightning base components (tags) that can be used to quickly build forms, buttons, and other elements without needing to write custom code from scratch.

In this post, we’ll walk through the most commonly used Lightning tags with examples, so you can confidently build your Salesforce apps using LWC.

---

1. <lightning-input>: Creating Input Fields

The <lightning-input> tag is a versatile input element that supports different types of data such as text, number, email, checkbox, and more. It automatically follows the Salesforce Lightning Design System (SLDS) styling.

Example:

html

<template>
    <!-- Text input field -->
    <lightning-input label="Enter your name" value={name} onchange={handleChange}></lightning-input>

    <!-- Number input field -->
    <lightning-input label="Enter your age" type="number" value={age} onchange={handleChange}></lightning-input>

    <!-- Checkbox -->
    <lightning-input label="Subscribe to newsletter" type="checkbox" checked={isSubscribed} onchange={handleCheckboxChange}></lightning-input>
</template>

Key Features:

• label: Adds a label to the input field.
• type: Specifies the type of input (e.g., text, number, email, etc.).
• checked: For checkboxes, it controls whether the box is checked.

---

2. <lightning-button>: Creating Buttons

The <lightning-button> tag allows you to create buttons with different styles and functionalities, such as primary, neutral, and destructive.

Example:

html

<template>
    <lightning-button label="Submit" onclick={handleSubmit} class="slds-m-around_small"></lightning-button>
    <lightning-button label="Cancel" variant="neutral" onclick={handleCancel}></lightning-button>
    <lightning-button label="Delete" variant="destructive" onclick={handleDelete}></lightning-button>
</template>

Key Features:

• label: Specifies the button text.
• variant: Defines the button style (e.g., neutral, brand, destructive).
• onclick: The event handler for when the button is clicked.

---

3. <lightning-card>: Displaying Content in a Card

A <lightning-card> is a container with a header that is commonly used to display blocks of information or group related items.

Example:

html

<template>
    <lightning-card title="User Information" icon-name="standard:user">
        <div class="slds-p-around_medium">
            <p><strong>Name:</strong> John Doe</p>
            <p><strong>Email:</strong> john.doe@example.com</p>
        </div>
    </lightning-card>
</template>

Key Features:

• title: Defines the card’s header.
• icon-name: Adds an icon in the card header from the Salesforce SLDS icon library.

---

4. <lightning-datatable>: Creating Data Tables

The <lightning-datatable> tag is used to display tabular data in a structured format, making it easier to show lists, records, or complex data sets.

Example:

<template>
    <lightning-datatable
        key-field="id"
        data={data}
        columns={columns}
        hide-checkbox-column
        onsave={handleSave}>
    </lightning-datatable>
</template>

JavaScript (Controller):

javascript

import { LightningElement } from 'lwc';

export default class DataTableExample extends LightningElement {
    data = [
        { id: '001', name: 'John Doe', email: 'john@example.com' },
        { id: '002', name: 'Jane Roe', email: 'jane@example.com' }
    ];

    columns = [
        { label: 'Name', fieldName: 'name', type: 'text' },
        { label: 'Email', fieldName: 'email', type: 'email' }
    ];
}

Key Features:

• columns: Defines the column headers and field names.
• data: The data to be displayed in the table.

---

5. <lightning-icon>: Displaying Icons

The <lightning-icon> tag allows you to use icons from the Salesforce SLDS icon library to enhance the visual presentation of your UI components.

Example:

html

<template>
    <lightning-icon icon-name="utility:success" alternative-text="Success" size="small"></lightning-icon>
    <lightning-icon icon-name="utility:error" alternative-text="Error" size="small"></lightning-icon>
</template>

Key Features:

• icon-name: Specifies the icon to display from SLDS (e.g., utility:success).
• size: Defines the icon size (small, medium, large).

---

6. <lightning-combobox>: Creating Dropdowns

The <lightning-combobox> tag provides a dropdown list that allows users to select from a predefined set of options.

Example:

html

<template>
    <lightning-combobox
        label="Select a fruit"
        value={selectedFruit}
        placeholder="Choose one"
        options={fruitOptions}
        onchange={handleFruitChange}>
    </lightning-combobox>
</template>

JavaScript (Controller):

javascript

import { LightningElement } from 'lwc';

export default class ComboboxExample extends LightningElement {
    selectedFruit = '';
    
    fruitOptions = [
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' },
        { label: 'Orange', value: 'orange' }
    ];

    handleFruitChange(event) {
        this.selectedFruit = event.detail.value;
    }
}

Key Features:

• options: Array of dropdown options with label and value pairs.
• onchange: Event handler for capturing user selection.

---

7. <lightning-radio-group>: Creating Radio Buttons

The <lightning-radio-group> tag allows you to create a group of radio buttons for users to select a single option.

Example:

html

<template>
    <lightning-radio-group
        label="Choose a subscription plan"
        options={planOptions}
        value={selectedPlan}
        onchange={handlePlanChange}>
    </lightning-radio-group>
</template>

JavaScript (Controller):

javascript

import { LightningElement } from 'lwc';

export default class RadioGroupExample extends LightningElement {
    selectedPlan = '';

    planOptions = [
        { label: 'Basic Plan', value: 'basic' },
        { label: 'Premium Plan', value: 'premium' },
        { label: 'Enterprise Plan', value: 'enterprise' }
    ];

    handlePlanChange(event) {
        this.selectedPlan = event.detail.value;
    }
}

Key Features:

• options: Defines the radio button options.
• onchange: Captures the selected option value.

---

Conclusion:

Understanding and using these essential Lightning base components can significantly improve your productivity when building user interfaces in Salesforce. From input fields and buttons to more advanced elements like data tables and icons, mastering these tags will help you create dynamic, responsive, and user-friendly applications using Lightning Web Components.

In upcoming posts, we’ll dive deeper into advanced tags and component interactions. Stay tuned to continue your journey in becoming an LWC pro!