I am new to building custom webparts. How do I add a simple dropdown list to a custom webpart. I am using the react framework and the myWebPart.ts file to do the majority of my work.


2 Answers 2


Oh my gosh! I have been searching tutorials for days and I finally found what I was looking for. All I needed to do was create a simple html drop down box.

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  • But you said you have react framework! You cannot ask question with false assumption. Of course, HTML code works.
    – jleture
    Jan 26 at 6:45

You can use the Dropdown component from the Fluent UI package:

import {Dropdown, IDropdownOption} from '@fluentui/react';

There are many articles to explain how to use it:

To use a dropdown in the property pane of the web part, you can follow theses articles:

  • Thanks for posting this. However, I realized that I actually have no framework on my project. Would this still work? Jan 25 at 21:09
  • My answer is correct regarding your assumption (react framework).
    – jleture
    Jan 26 at 6:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.