---
layout: post
title: Getting Started with Blazor ListBox in Blazor WASM App | Syncfusion®
description: Check out and learn how to get started with the Blazor ListBox component in a Blazor WebAssembly Application.
platform: Blazor
control: ListBox
documentation: ug
---
# Getting Started with Blazor ListBox Component in Blazor WASM App
This guide briefly explains how to include the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
## Create a new Blazor WASM App
{% tabcontents %}
{% tabcontent Visual Studio %}
Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
Run the following command to create a new Blazor WebAssembly App.
{% tabs %}
{% highlight razor tabtitle="Terminal" %}
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
{% endhighlight %}
{% endtabs %}
Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension.
{% endtabcontent %}
{% tabcontent .NET CLI %}
Run the following command to create a new Blazor WebAssembly App.
{% tabs %}
{% highlight razor tabtitle="Command Prompt" %}
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% endtabcontents %}
## Install required Blazor packages
Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
{% tabcontents %}
{% tabcontent Visual Studio %}
1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*.
2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
{% tabs %}
{% highlight razor tabtitle="Package Manager Console" %}
Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
Open the terminal and run the following commands.
{% tabs %}
{% highlight razor tabtitle="Terminal" %}
dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% tabcontent .NET CLI %}
Open the command prompt and run the following commands.
{% tabs %}
{% highlight razor tabtitle="Command Prompt" %}
dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% endtabcontents %}
## Add import namespaces
After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns
{% endhighlight %}
{% endtabs %}
## Register the Blazor service
Open the **Program.cs** file in the Blazor WebAssembly App and register the Blazor service.
{% tabs %}
{% highlight C# tabtitle="Program.cs" %}
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....
{% endhighlight %}
{% endtabs %}
## Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file.
{% tabs %}
{% highlight html tabtitle="index.html" %}
...
...
{% endhighlight %}
{% endtabs %}
## Add Blazor ListBox component
Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component inside the razor file.
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
{% endhighlight %}
{% endtabs %}
## Binding data source
After initialization, populate the ListBox using the `DataSource` property. In the following example, an array of objects is bound and fields are mapped via `ListBoxFieldSettings`.
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
@code {
public List Vehicles = new List {
new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};
public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
}
}
{% endhighlight %}
{% endtabs %}
N> `TValue` specifies the value type of the data source for type inference. It is a generic type and can be specified as string[], int[], and so on.
## Run the application
{% tabcontents %}
{% tabcontent Visual Studio %}
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor ListBox component will render in your default web browser.
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
Open the terminal and run the following command.
{% tabs %}
{% highlight razor tabtitle="Terminal" %}
dotnet run
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% tabcontent .NET CLI %}
Open the command prompt and run the following command.
{% tabs %}
{% highlight razor tabtitle="Command Prompt" %}
dotnet run
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% endtabcontents %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLdXcNVrzYLWIRm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.webp)" %}
N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox).
## See also
1. [Getting Started with Blazor WebAssembly Standalone App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
3. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
4. [Sorting and Grouping in Blazor ListBox Component](https://blazor.syncfusion.com/documentation/listbox/sorting-grouping)