Select bindings in Svelte - Mini Project: Build & Apply

Select Bindings in Svelte

📖 Scenario: You are building a simple fruit picker app. Users can choose their favorite fruit from a dropdown list.

🎯 Goal: Create a Svelte component with a <select> dropdown bound to a variable. Show the selected fruit below the dropdown.

📋 What You'll Learn

Create a list of fruits as an array

Create a variable to hold the selected fruit

Bind the <select> element to the selected fruit variable

Display the selected fruit below the dropdown

💡 Why This Matters

🌍 Real World

Dropdown menus are common in forms and apps to let users pick one option from many. Binding the selection to a variable keeps the UI and data in sync.

💼 Career

Understanding how to bind form inputs in Svelte is essential for building interactive web apps that respond to user choices instantly.

1

Create the fruits array

Create an array called fruits with these exact values: "Apple", "Banana", "Cherry", "Date", "Elderberry".

Svelte

# Create an array called fruits with the given fruit names

// Your code here

Need a hint?

Use let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"] to create the array.

2

Create the selected fruit variable

Create a variable called selectedFruit and set it to the string "Apple".

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

// Create a variable called selectedFruit and set it to "Apple"
// Your code here

Need a hint?

Use let selectedFruit = "Apple" to create the variable.

3

Bind the select element to selectedFruit

Add a <select> element that uses bind:value={selectedFruit}. Inside it, use a {#each} block to create <option> elements for each fruit in fruits. Each option's value and text should be the fruit name.

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
let selectedFruit = "Apple"

Need a hint?

Use <select bind:value={selectedFruit}> and inside it a {#each fruits as fruit} block with <option value={fruit}>{fruit}</option>.

4

Display the selected fruit

Below the <select>, add a <p> element that shows the text: Your favorite fruit is: {selectedFruit}.

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
let selectedFruit = "Apple"


  {#each fruits as fruit}
    {fruit}
  {/each}

Need a hint?

Use <p>Your favorite fruit is: {selectedFruit}</p> below the select.