# Dropdown Input will not let me set a default option or empty select input

**URL:** https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192
**Category:** Technical FAQs
**Tags:** visual-editor
**Created:** [March 20, 2024, 2:46pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192 "2024-03-20T14:46:29Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![seodom](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@seodom](https://forum.builder.io/u/seodom)
#### Post date: [March 20, 2024, 2:46pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/1 "2024-03-20T14:46:29Z")

</div>

I am building a form and using the dropdown select input option. I want the default option to be set to empty so that the customer using this form is required to select an option rather than it loading the page with one already pre-selected. I attempted to put “Select a contact” in the “Default Value” section, but nothing happens.

 ![Screenshot 2024-03-20 at 10.46.12 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/54206e83e434573da02ac4a2aae2ab2d9d18cfeb.png)

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 3, 2024, 3:23pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/2 "2024-04-03T15:23:04Z")

</div>

Hello @seodom,

Welcome to the [builder.io](http://builder.io) forum post.

While there’s no direct way to add a default option or an empty select input, you can achieve this using custom JavaScript code. In the Builder editor, under the “Data” tab → “Edit Content JS + CSS” section, you can utilize the following code to add a default select option:

```auto
  setTimeout(function() {
    // Query the select element by its name attribute
    var selectElement = document.querySelector('select[name="contact"]');
    
    console.log(selectElement); // Output the select element to console
    
    if (selectElement) {
      // Create a default option
      var defaultOption = document.createElement("option");
      defaultOption.text = "Select a contact*";
      defaultOption.value = "";
      defaultOption.selected = true; 
      // Add the default option to the select element
       selectElement.insertBefore(defaultOption, selectElement.firstChild);
    } else {
      console.error('Select element not found.');
    }
  }, 1000); // 1000 milliseconds = 1 second

```

 ![Screenshot 2024-04-03 at 8.49.44 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d0188c29a3cdd11a9fed1178ccc753e6a1edd36e.png)  
 ![Screenshot 2024-04-03 at 8.49.15 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/cc9dbe378028f920c396eea35f5a272d31430edb.png)

---

<div class="post-metadata">

### Author: ![seodom](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@seodom](https://forum.builder.io/u/seodom)
#### Post date: [April 4, 2024, 3:11pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/3 "2024-04-04T15:11:08Z")

</div>

Thank you @manish-sharma for this response! I implemented the code in the JS+CSS section but nothing has changed on the form. Does it look like I did something wrong?

 ![Screenshot 2024-04-04 at 11.10.03 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e545ef61029964e98c9854e6b3ba7c4c216347e6.jpeg)  
 ![Screenshot 2024-04-04 at 11.10.16 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/66366fe163b6919030a64bf9ac67864834d6c43a.png)  
 ![Screenshot 2024-04-04 at 11.10.22 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/085c2fa2019051c0c897fb41fca3a3968edf2620.png)

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 4, 2024, 3:28pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/4 "2024-04-04T15:28:48Z")

</div>

Hello @seodom,

It appears that the “Name\*” field has an uppercase “Contact” label, but in your code, you are targeting (‘select[name=“contact”]’). Please adjust this to (‘select[name=“Contact”]’) and see if it resolves the issue.

Thanks,

---

<div class="post-metadata">

### Author: ![seodom](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@seodom](https://forum.builder.io/u/seodom)
#### Post date: [April 4, 2024, 3:34pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/5 "2024-04-04T15:34:39Z")

</div>

That worked @manish-sharma ! Another question, The “Select a Contact\*” shows up twice now. Is there a way to just show it once? The form also doesn’t recognize that the user hasn’t selected a contact from the drop down. Is it possible for the default contact we set up in the code to trigger the form to realize that nothing has been chosen by the user?

 ![Screenshot 2024-04-04 at 11.32.10 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bce82f8d7dff699edb69bbb0e8248f6cf76a1929.png)

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 5, 2024, 4:42pm UTC](https://forum.builder.io/t/dropdown-input-will-not-let-me-set-a-default-option-or-empty-select-input/5192/6 "2024-04-05T16:42:13Z")

</div>

Hello @seodom,

Remove the Default value input from the Dropdown component, which will show only one “Select a Contact\*”. For form submission to consider the default input as null, consider using the custom JS option to validate the form dropdown before submitting.

 ![Screenshot 2024-04-05 at 10.09.44 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bba0a8d05d8d7378c1259bd779fcbf09a94dbf07.png)

> **[Creating forms in Builder.io - Builder.io](https://www.builder.io/c/docs/guides/forms#connecting-your-backend)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.
