Forms

TwTextfield

TwTextfield is a Blazor text input component. Bind Value, set InputType, Placeholder and Dense, and validate synchronously or asynchronously with Validator.

Last updated 25 September 2026

Textfield

Bind Value to a labeled text input with a placeholder.

Forename

Surname

Razor

<div class="md:flex-col flex-row flex gap-2">
    <TwTextfield Label="Forename" @bind-Value="Forename" Placeholder="Please enter your forename" AriaLabel="Forename textfield"  />
    <TwTextfield Label="Surname" @bind-Value="Surname" Placeholder="Please enter your surname" AriaLabel="Surname textfield" />
</div>

Disabled Textfield

Use the Disabled property to prevent interaction with the textfield.

Forename

Razor

<TwTextfield Label="Forename" @bind-Value="Forename" Placeholder="Please enter your forename" AriaLabel="Forename textfield" Disabled />

Readonly Textfield

Use the ReadOnly property to display a value that can't be edited.

Account ID

Razor

<TwTextfield Label="Account ID" @bind-Value="AccountId" Placeholder="Account ID" AriaLabel="Account ID textfield" ReadOnly />

Outlined Variant

Set Variant="InputVariant.Outlined" for an outlined textfield style.

Forename

Surname

Razor

<div class="md:flex-col flex-row flex gap-2">
    <TwTextfield Label="Forename" @bind-Value="Forename" Placeholder="Please enter your forename" AriaLabel="Forename textfield" Variant="InputVariant.Outlined" />
    <TwTextfield Label="Surname" @bind-Value="Surname" Placeholder="Please enter your surname" AriaLabel="Surname textfield" Variant="InputVariant.Outlined" />
</div>

Filled Variant

Set Variant="InputVariant.Filled" for a filled textfield style.

Forename

Surname

Razor

<div class="md:flex-col flex-row flex gap-2">
    <TwTextfield Label="Forename" @bind-Value="Forename" Placeholder="Please enter your forename" AriaLabel="Forename textfield" Variant="InputVariant.Filled" />
    <TwTextfield Label="Surname" @bind-Value="Surname" Placeholder="Please enter your surname" AriaLabel="Surname textfield" Variant="InputVariant.Filled" />
</div>

Different Input Types

Use InputType to render native input types such as email and password.

Password

Razor

<div class="md:flex-col flex-row flex gap-2">
    <TwTextfield Label="Email" @bind-Value="Email" Placeholder="Enter your email address" AriaLabel="Email textfield" InputType="email" />
    <TwTextfield Label="Password" @bind-Value="Password" Placeholder="Enter password" AriaLabel="Password textfield" InputType="password" />
</div>

Invalid Textfield

Set Invalid and ErrorMessage to mark the textfield as failing validation. The message is rendered below the input and associated with it via aria-describedby so assistive technology announces it alongside the field.

Please enter a valid email address.

Razor

<TwTextfield Label="Email" @bind-Value="InvalidEmail" Placeholder="Enter your email address" AriaLabel="Email textfield" Invalid ErrorMessage="Please enter a valid email address." />

Dense Textfield

Set Dense for a more compact input with a smaller height and text size. Every single-line input shares the same dense height, so they line up when used side by side.

Forename

Razor

<TwTextfield Label="Forename" @bind-Value="Forename" Placeholder="Please enter your forename" AriaLabel="Dense forename textfield" Dense />

Validation on Change

Pass a Validator function to have the textfield validate itself whenever its value changes. Return null (or an empty string) when the value is valid, or an error message to automatically mark the field Invalid and display the returned message - no need to manage Invalid or ErrorMessage yourself.

Username

Razor

<TwTextfield Label="Username" @bind-Value="Username" Placeholder="Enter a username" AriaLabel="Username textfield" Validator="ValidateUsername" />

CSHARP

@code {
    public string Username { get; set; } = string.Empty;
    
    private static Task<string?> ValidateUsername(string value)
    {
        if (string.IsNullOrWhiteSpace(value))
        {
            return Task.FromResult<string?>("Username is required.");
        }
    
        if (value.Length < 3)
        {
            return Task.FromResult<string?>("Username must be at least 3 characters.");
        }
    
        return Task.FromResult<string?>(null);
    }
}

Asynchronous Validation

Validator returns a Task<string?>, so it can perform asynchronous work such as an API call without blocking the UI. This example simulates checking username availability against a server.

New Username

Razor

<TwTextfield Label="New Username" @bind-Value="NewUsername" Placeholder="Enter a username" AriaLabel="New username textfield" Validator="ValidateUsernameAvailabilityAsync" />

CSHARP

@code {
    public string NewUsername { get; set; } = string.Empty;
    
    private readonly HashSet<string> takenUsernames = new(StringComparer.OrdinalIgnoreCase) { "admin", "root", "jack" };
    
    private async Task<string?> ValidateUsernameAvailabilityAsync(string value)
    {
        if (string.IsNullOrWhiteSpace(value))
        {
            return "Username is required.";
        }
    
        // Simulate a network call to check availability against a server.
        await Task.Delay(300);
    
        return takenUsernames.Contains(value) ? $"'{value}' is already taken." : null;
    }
}

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.