Design

4 min

How to Disable the First Option in a Select Input in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how and why to disable the first option in a select input in Webflow.

Benefit	Description
Intentional choice	Prevents the default value from being submitted
Better data quality	Avoids accidental submissions
Improved UX	Makes it clear that a selection is required

Why disable the first option in a Webflow select input?

1. Force the user to make an intentional choice

By disabling the first option, which can be an instruction like "Please select an option," you force the user to make an explicit choice instead of letting a default value be submitted. That way, they won't skip over the selection step.

2. Avoid accidental submissions

A default option could be submitted by mistake if the user isn't paying attention. By disabling that first option, you reduce the risk of incorrect or incomplete submissions.

3. Guide the user and increase your conversion rate

This improves the user experience by clearly showing that the user needs to select one of the available options. It can reduce confusion and improve the quality of the data submitted.

‍

How do you do it in Webflow?

1. Add this custom code to your page

‍

2. Add the ID "select-id" to your select

‍

3. Publish and test the result

good to know

Alternative without JavaScript: add the first option with the value '' (empty) and enable the required attribute. The HTML5 form won't submit if the value is empty, with no extra code needed.

Bonus: If you have multiple selects

1. Use this custom code

‍

You can add as many selects as you want, you just need to add

‍