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

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.