Select Binding in...
You will notice that without any extra code, React will select the next value because the first one is disabled. Vue and Svelte leave the select empty.
Check it out 🚀
React
const [selected, setSelected] = useState<string>('Choose one option');
<section>
<h2>Select</h2>
<select onChange={(e) => setSelected(e.target.value)}>
<option value="" disabled>
Please select one
</option>
<option>Frontend Developer</option>
<option>Backend Developer</option>
<option>Fullstack Developer</option>
</select>
<p>Selected: {selected}</p>
</section>
Vue
const selected = ref('Choose one option');
<section>
<h2>Select</h2>
<select v-model="selected">
<option value="" disabled>Please select one</option>
<option>Frontend Developer</option>
<option>Backend Developer</option>
<option>Fullstack Developer</option>
</select>
<p>Selected: {{ selected }}</p>
</section>
Svelte
let selected: string = 'Choose one option';
<section>
<h2>Select</h2>
<select bind:value={selected}>
<option disabled value="">Please select one</option>
<option>Frontend Developer</option>
<option>Backend Developer</option>
<option>Fullstack Developer</option>
</select>
<p>Selected: {selected}</p>
</section>
Top comments (1)
Awesome content Clement, I went through from the first one down to this