I have a LWC which takes two boolean inputs isVideo and isImage in JavaScript file. Based on the value of isVideo or isImage, the LWC behaves differently. At a time only one has to be true. While inserting the component on lightning detail page using Lightning App Builder, I want to have a radio button to select isVideo or isImage. I wish to use design attributes to achieve it. This means that the same component gets added twice but with true for isVideo the first time and true for isImage the second time. I referred this site and official documentation. Is there a way to add a radio button in design attributes? Please guide. Thank You!

meta.xml file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <targetConfig targets="lightning__RecordPage">
            <property name="isVideo" type="Boolean" label="Video Component"/>
            <property name="isVideo" type="Boolean" label="Image Component"/>

1 Answer 1


To specify a list of options, you need to do so in a single attribute. such as:

<targetConfig targets="...">
  <property datasource="Video,Image" name="mediaType" type="String" required="true" />

And in your JS file:

@api set mediaType(value) {
  this.isVideo = value === 'Video';
  this.isImage = value === 'Audio';
get mediaType() {
  return this.isVideo? 'Video': this.isAudio? 'Audio': '';
  • Thanks for the answer! I am getting the error The 'mediaType' property doesn't exist on the component. What is wrong here?
    – Koustubh
    Commented Apr 14, 2020 at 5:22
  • 1
    @Koustubh I forgot it should have been marked with the api decorator: import { LightningElement, api } from 'lwc'; ... @api set mediaType(value) { ... } Also, just tested, a setter is required. See edits.
    – sfdcfox
    Commented Apr 14, 2020 at 5:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .