Forms

TwSelect

TwSelect is a Blazor select component for complex objects and numbers. Bind SelectedValue, or SelectedValues with Multiple, and set Placeholder and Required.

Last updated 25 September 2026

Basic Select

Bind SelectedValue and use Variant to switch between default, filled and outlined styles.

Country

Razor

<div class="w-full flex flex-row">
    <div class="flex-col lg:flex-row flex grow gap-4 mb-4">
        <TwSelect T="string"
                  Label="Country"
                  Values="@countries"
                  Variant="InputVariant.Default"
                  @bind-SelectedValue="@selectedCountry"
                  Placeholder="Select a country..."
                  AriaLabel="Country select"
                  RootClass="flex-1"/>

        <TwSelect T="string"
                  Label="Country"
                  Values="@countries"
                  Variant="InputVariant.Filled"
                  @bind-SelectedValue="@selectedCountry"
                  Placeholder="Select a city..."
                  AriaLabel="City select"
                  RootClass="flex-1" />

        <TwSelect T="string"
                  Label="Country"
                  Values="@countries"
                  Variant="InputVariant.Outlined"
                  @bind-SelectedValue="@selectedCountry"
                  Placeholder="Select a city..."
                  AriaLabel="City select"
                  RootClass="flex-1" />
    </div>
</div>

@if (!string.IsNullOrEmpty(selectedCountry))
{
    <p class="text-sm text-gray-600 dark:text-gray-400 pb-4">Selected Country: <strong>@selectedCountry</strong></p>
}

CSHARP

@code {
    private string selectedCountry = string.Empty;
    private readonly string[] countries = ["USA", "Canada", "UK", "Germany", "France", "Japan", "Australia"];
}

Select with Complex Objects

Use PropertyName to display a specific property when binding to a list of complex objects.

Select Person

Razor

<TwSelect T="Person"
          Label="Select Person"
          Values="@people"
          @bind-SelectedValue="@selectedPerson"
          PropertyName="Name"
          Placeholder="Choose a person..."
          AriaLabel="Person select" />

@if (selectedPerson != null)
{
    <div class="mt-3 p-3 rounded border border-gray-200 dark:border-gray-600">
        <p class="text-sm text-gray-600 dark:text-gray-400">Name: <strong>@selectedPerson.Name</strong></p>
        <p class="text-sm text-gray-600 dark:text-gray-400">City: <strong>@selectedPerson.City</strong></p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Age: <strong>@selectedPerson.Age</strong></p>
    </div>
}

CSHARP

@code {
    private Person? selectedPerson = null;
    
    private readonly Person[] people =
    [
        new Person { Id = 1, Name = "John Doe", City = "London", Age = 30 },
        new Person { Id = 2, Name = "Jane Smith", City = "Toronto", Age = 25 },
        new Person { Id = 3, Name = "Bob Johnson", City = "Sydney", Age = 35 },
        new Person { Id = 4, Name = "Alice Williams", City = "Dublin", Age = 28 }
    ];
    
    private sealed class Person
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
        public int Age { get; set; }
    }
}

Required Select

Set the Required property to mark the select as a required field.

Favourite Color

Razor

<TwSelect T="string"
          Label="Favourite Color"
          Values="@colors"
          @bind-SelectedValue="@selectedColor"
          Required
          AriaLabel="Color select" />

@if (!string.IsNullOrEmpty(selectedColor))
{
    <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Selected Color: <strong>@selectedColor</strong></p>
}

Disabled and Readonly Select

Use the Disabled and ReadOnly properties to restrict interaction with the select.

Disabled Select

Readonly Select

Razor

<div class="flex flex-col gap-3">
    <TwSelect T="string"
              Label="Disabled Select"
              Values="@countries"
              @bind-SelectedValue="@selectedCountry"
              Placeholder="Cannot select..."
              Disabled
              AriaLabel="Disabled select" />

    <TwSelect T="string"
              Label="Readonly Select"
              Values="@countries"
              SelectedValue="@readonlyValue"
              Placeholder="Cannot change..."
              ReadOnly
              AriaLabel="Readonly select" />
</div>

Select with Numbers

TwSelect works with numeric types as well as strings and objects.

Quantity

Razor

<TwSelect T="int"
          Label="Quantity"
          Values="@quantities"
          @bind-SelectedValue="@selectedQuantity"
          Placeholder="Select quantity..."
          AriaLabel="Quantity select" />

@if (selectedQuantity > 0)
{
    <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Selected Quantity: <strong>@selectedQuantity</strong></p>
    <p class="text-sm text-gray-600 dark:text-gray-400">Total Price: <strong>$@(selectedQuantity * 10)</strong></p>
}

Dense Select

Set Dense for a more compact select with a smaller height and text size, matching the other dense inputs. Multi-select is not affected, as its height follows its selected chips.

Country

Razor

<TwSelect T="string"
          Label="Country"
          Values="@countries"
          Dense
          @bind-SelectedValue="@denseCountry"
          AriaLabel="Dense country select" />

CSHARP

@code {
    private string denseCountry = string.Empty;
}

Multi-select

Set Multiple and bind SelectedValues (instead of SelectedValue) to let more than one option be selected at once. It renders as a native <select multiple>, so mobile/touch browsers still get their own platform multi-select UI rather than a bespoke one.

Skills

Selected Skills: C#

Razor

<TwSelect T="string"
          Label="Skills"
          Values="@skills"
          Multiple
          @bind-SelectedValues="@selectedSkills"
          AriaLabel="Skills select" />

@if (selectedSkills.Any())
{
    <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Selected Skills: <strong>@string.Join(", ", selectedSkills)</strong></p>
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwInputTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Inherited from TwTextfield - this component reuses that theme rather than defining its own.

Property	Type	Controls
`DefaultInputVariant`	InputVariant
`TextfieldBase`	string
`SelectBase`	string
`Size`	string
`DenseSize`	string
`SelectOption`	string
`SelectNativeBackground`	string
`SelectDefaultPadding`	string
`SelectReadOnlyBackground`	string
`SelectMultiTriggerLayout`	string
`SelectNativeMultiOverlay`	string
`SelectMultiOpenButton`	string
`SelectPanelPosition`	string
`SelectPanelSurface`	string
`SelectPanelItemText`	string
`LabelBase`	string
`InputLegendBase`	string
`OutlinedBorder`	string
`FilledBorder`	string
`FocusBorder`	string
`FilledBackgroundColor`	string
`ErrorMessage`	string

Full reference: TwInputTheme on the API docs.