DEV Community

Cover image for React, Vue and Svelte : Comparing Select Binding
Clément Creusat
Clément Creusat

Posted on • Updated on

React, Vue and Svelte : Comparing Select Binding

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

Live Example

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>
Enter fullscreen mode Exit fullscreen mode

Vue

Live Example

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>
Enter fullscreen mode Exit fullscreen mode

Svelte

Live Example

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
aybee5 profile image
Ibrahim Abdullahi Aliyu

Awesome content Clement, I went through from the first one down to this