Select bindings in Svelte

Introduction

Select bindings let you connect a dropdown menu directly to a variable. This means when you pick an option, the variable updates automatically.

You want to let users pick one choice from a list, like selecting a country.

You need to show a dropdown that changes a setting in your app instantly.

You want to keep your code simple by linking the dropdown to a variable without extra code.

Syntax

Svelte

<select bind:value={variable}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Use bind:value to connect the select's chosen value to a variable.

The variable updates automatically when the user picks a different option.

Examples

This example shows a dropdown for fruits. The selected fruit is shown below and updates as you pick different options.

Svelte

<script>
  let fruit = 'apple';
</script>

<select bind:value={fruit}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<p>You selected: {fruit}</p>

This example adds an ARIA label for accessibility, helping screen readers describe the dropdown.

Svelte

<script>
  let color = 'red';
</script>

<select bind:value={color} aria-label="Choose a color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<p>Selected color: {color}</p>

Sample Program

This complete Svelte component shows a labeled dropdown to pick a city. The chosen city updates below automatically. The label and ARIA attribute improve accessibility.

Svelte

<script>
  let city = 'newyork';
</script>

<label for="city-select">Choose a city:</label>
<select id="city-select" bind:value={city} aria-label="City selection">
  <option value="newyork">New York</option>
  <option value="london">London</option>
  <option value="tokyo">Tokyo</option>
</select>

<p>Your chosen city is: {city}</p>

Important Notes

Always use a <label> with for matching the id of the <select> for better accessibility.

Use aria-label if you don't have a visible label to help screen readers.

The bound variable updates instantly when the user changes the selection, no extra event handling needed.

Summary

Select bindings connect dropdown menus directly to variables.

They keep your code simple and reactive.

Always add labels or ARIA attributes for accessibility.

Practice

1. What does the bind:value directive do in a Svelte <select> element?

easy

A. It disables the select dropdown.

B. It styles the selected option with a special color.

C. It links the selected option to a variable, updating it automatically.

D. It creates a new option dynamically.

Solution

1. Step 1: Understand bind:value usage

   The bind:value directive connects the selected option's value to a variable in Svelte, so changes update the variable automatically.

2. Step 2: Analyze other options

   Options A, B, and D describe unrelated behaviors: disabling, styling, or creating options, which bind:value does not do.

3. Final Answer:

   It links the selected option to a variable, updating it automatically. -> Option C

4. Quick Check:

   Select binding = automatic variable update [OK]

Hint: Remember: bind:value syncs select with variable [OK]

Common Mistakes:

• Thinking bind:value styles the select
• Confusing bind:value with disabling the select
• Assuming bind:value adds options

2. Which of the following is the correct syntax to bind a variable named color to a <select> element in Svelte?

easy

A. <select bind:value={color}>

B. <select bind:color>

C. <select value={color}>

D. <select bind:select={color}>

Solution

1. Step 1: Recall Svelte binding syntax

   In Svelte, to bind a variable to the value of a select, use bind:value={variable}.

2. Step 2: Check each option

   <select bind:value={color}> matches correct syntax. <select bind:color> uses incorrect binding name. <select value={color}> only sets value but does not bind. <select bind:select={color}> uses invalid binding name.

3. Final Answer:

   <select bind:value={color}> -> Option A

4. Quick Check:

   Correct bind syntax = bind:value={variable} [OK]

Hint: Use bind:value={variable} for select binding [OK]

Common Mistakes:

• Using bind:color instead of bind:value
• Setting value without bind
• Using incorrect binding names

3. Given this Svelte code:

  <script>
    let fruit = 'apple';
  </script>

  <select bind:value={fruit}>
    <option value='apple'>Apple</option>
    <option value='banana'>Banana</option>
    <option value='cherry'>Cherry</option>
  </select>

  <p>Selected fruit: {fruit}</p>

What will be displayed initially in the paragraph?

medium

A. Selected fruit: (empty)

B. Selected fruit: banana

C. Selected fruit: cherry

D. Selected fruit: apple

Solution

1. Step 1: Check initial variable value

   The variable fruit is initialized to 'apple'.

2. Step 2: Understand binding effect

   The select binds its value to fruit, so the option with value 'apple' is selected initially, and the paragraph shows that value.

3. Final Answer:

   Selected fruit: apple -> Option D

4. Quick Check:

   Initial variable value = displayed text [OK]

Hint: Initial variable sets selected option and displayed text [OK]

Common Mistakes:

• Assuming default select is empty
• Confusing option order with initial value
• Ignoring variable initialization

4. Identify the error in this Svelte code snippet:

<script>
  let choice;
</script>

<select bind:value=choice>
  <option value='1'>One</option>
  <option value='2'>Two</option>
</select>

medium

A. Missing curly braces around variable in bind:value

B. Options must have numeric values only

C. Variable choice must be initialized to a string

D. bind:value cannot be used on select

Solution

1. Step 1: Check bind:value syntax

   In Svelte, binding requires curly braces around the variable: bind:value={choice}.

2. Step 2: Verify other options

   Options A, B, and C are incorrect because bind:value is valid on select, options can have string values, and variables can be undefined initially.

3. Final Answer:

   Missing curly braces around variable in bind:value -> Option A

4. Quick Check:

   bind:value requires {variable} syntax [OK]

Hint: Always use curly braces in bind:value={variable} [OK]

Common Mistakes:

• Omitting curly braces in bind:value
• Thinking variables must be initialized
• Believing bind:value is invalid on select

5. You want to create a <select> in Svelte that allows users to pick a fruit, but if the user selects "None", the bound variable should be set to null instead of the string "none". Which approach correctly achieves this?

hard

A. Use <select bind:value={fruit}> with an <option value={null}>None</option>

B. Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none'

C. Use <select bind:value={fruit}> and set the option value to undefined for None

D. Use <select bind:value={fruit}> and convert fruit to null on form submit only

Solution

1. Step 1: Understand option values and binding

   HTML option values are strings, so setting value={null} becomes "null" string, not JavaScript null.

2. Step 2: Use reactive statement to convert value

   Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none' uses a reactive statement to watch fruit and set it to null when the string 'none' is selected, correctly converting the value.

3. Step 3: Analyze other options

   Use <select bind:value={fruit}> with an <option value={null}>None</option> incorrectly tries to bind null directly as value. Use <select bind:value={fruit}> and set the option value to undefined for None uses undefined which becomes string. Use <select bind:value={fruit}> and convert fruit to null on form submit only delays conversion, not reactive.

4. Final Answer:

   Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none' -> Option B

5. Quick Check:

   Reactive conversion handles string to null correctly [OK]

Hint: Use reactive code to convert string 'none' to null [OK]

Common Mistakes:

• Trying to bind null directly as option value
• Assuming option values can be non-string
• Delaying conversion until form submit