How to hide label of lightning combobox or drop down in lightning web component(LWC) - Salesforce Globe For You
Solution: Use variant="label-hidden" or remove label="".if we remove label ,you can still find empty space for label.
hideLabelLightningInputLWC.html
<template>
<lightning-card title="Hide Label of Combobox">
Industry Drop Down with Label <br/><br/><br/>
<template if:true={industryPicklist.data}>
<lightning-combobox name="Industry" value={Industry} label="Industry"
options={industryPicklist.data.values}>
</lightning-combobox>
</template>
Industry Drop Down without Label <br/><br/><br/>
<template if:true={industryPicklist.data}>
<lightning-combobox name="Industry" value={Industry} label="Industry"
options={industryPicklist.data.values} variant="label-hidden">
</lightning-combobox>
</template>
Industry Drop Down without Label <br/><br/><br/>
<template if:true={industryPicklist.data}>
<lightning-combobox name="Industry" value={Industry}
options={industryPicklist.data.values} >
</lightning-combobox>
</template>
</lightning-card>
</template>
hideLabelLightningInputLWC.js
import { api,track,wire,LightningElement } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class HideLabelLightningInputLWC extends LightningElement {
@api industry;
@track lstAccount = [];
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT }) accountMetaData;
@wire(getPicklistValues,{
recordTypeId: '$accountMetaData.data.defaultRecordTypeId',
fieldApiName: INDUSTRY_FIELD
}
) industryPicklist;
}
hideLabelLightningInputLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
