Record Type Selector in Lightning Web Component(lwc)

This post explains how to implement record type selector in lightning web components(lwc)

To get the record type info in lightning web components we have to use the wire adapter getObjectInfo this wire adapter gets metadata about a specific object. The response includes metadata describing fields, child relationships, record type, and theme.

In this example, I am using the Account Object. getObjectInfo wire adapter returns the account object info.

RecordTypesInLWC.html

<template>
    <lightning-card title="Record Type Selector in Lightning Web Component">
            <lightning-layout multiple-rows="true" vertical-align="end">
                <lightning-layout-item size="6" small-device-size="2" medium-device-size="4" large-device-size="4" padding="around-small">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <lightning-combobox name="recordTypes"
                                                    label="Account Record Types"
                                                    value={selectedValue}
                                                    placeholder="-Select-"
                                                    options={options}
                                                    onchange={handleChange} ></lightning-combobox>
                            </div>
                        </div>
                </lightning-layout-item>
            </lightning-layout><br/>
        <div style="margin-left:3%;">
            <div if:true={selectedValue}>
                Selected Record Type Id: <b>{selectedValue}</b>
            </div>
        </div>
    </lightning-card>
</template>

recordTypesInLWC.js

import { LightningElement, wire, track } from 'lwc';

// importing to get the object info 
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
// importing Account shcema
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class RecordTypesInLWC extends LightningElement {
    @track selectedValue;
    @track options = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accObjectInfo({data, error}) {
        if(data) {
            let optionsValues = [];
            // map of record type Info
            const rtInfos = data.recordTypeInfos;

            // getting map values
            let rtValues = Object.values(rtInfos);

            for(let i = 0; i < rtValues.length; i++) {
                if(rtValues[i].name !== 'Master') {
                    optionsValues.push({
                        label: rtValues[i].name,
                        value: rtValues[i].recordTypeId
                    })
                }
            }

            this.options = optionsValues;
        }
        else if(error) {
            window.console.log('Error ===> '+JSON.stringify(error));
        }
    }
     
    // Handling on change value
    handleChange(event) {
        this.selectedValue = event.detail.value;
    }

}

recordTypesInLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RecordTypesInLWC">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output