Forms

TwTimePicker

TwTimePicker is a Blazor time picker component with 12 hour and 24 hour formats. Bind Value or SelectedTime, and set Placeholder and Variant.

Last updated 25 September 2026

Basic Time Picker

Bind SelectedTime for a TimeOnly value, or Value for a plain string.

@bind-SelectedTime (TimeOnly): 8:41 PM

Select a time

@bind-Value (string): 20:41

Select a time

Razor

<div class="space-y-4">
    <p><b>@@bind-SelectedTime (TimeOnly):</b> @SelectedTime.ToString()</p>
    <TwTimePicker Id="basic-timepicker" @bind-SelectedTime="SelectedTime" @bind-Value="SelectedTimeTextValue" Label="Select a time" Class="mt-3" />
    <p><b>@@bind-Value (string):</b> @SelectedTimeTextValue</p>
    <TwTimePicker Id="basic-timepicker-string" @bind-Value="SelectedTimeTextValue" Label="Select a time" Class="mt-3" />
</div>

CSHARP

@code {
    public TimeOnly SelectedTime { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
    public string SelectedTimeTextValue { get; set; } = TimeOnly.FromDateTime(DateTime.Now).ToString("HH:mm");
}

Input Variants

The DatePicker supports different visual variants for the input field.

Default Variant

Outlined Variant

Filled Variant

Razor

<div class="space-y-4">
    <TwTimePicker Id="default-variant" @bind-SelectedTime="SelectedTime" Label="Default Variant" Variant="InputVariant.Default" />
    <TwTimePicker Id="outlined-variant" @bind-SelectedTime="SelectedTime" Label="Outlined Variant" Variant="InputVariant.Outlined" />
    <TwTimePicker Id="filled-variant" @bind-SelectedTime="SelectedTime" Label="Filled Variant" Variant="InputVariant.Filled" />
</div>

CSHARP

@code {
    public TimeOnly SelectedTime { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
    public string SelectedTimeTextValue { get; set; } = TimeOnly.FromDateTime(DateTime.Now).ToString("HH:mm");
}

12hr Time Picker

Set Is12HourFormat to display and enter time in a 12-hour format.

@bind-SelectedTime (TimeOnly): 8:41 PM

Select a time

Razor

<p><b>@@bind-SelectedTime (TimeOnly):</b> @SelectedTime.ToString()</p>
<TwTimePicker Id="basic-12hr-timepicker" @bind-SelectedTime="SelectedTime" Label="Select a time" Class="mt-3" Is12HourFormat />

CSHARP

@code {
    public TimeOnly SelectedTime { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
    public string SelectedTimeTextValue { get; set; } = TimeOnly.FromDateTime(DateTime.Now).ToString("HH:mm");
}

Dense Time Picker

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.

Dense Time Picker

Razor

<TwTimePicker Id="dense-timepicker" @bind-SelectedTime="SelectedTime" Label="Dense Time Picker" Dense />

Disabled and Readonly Time Picker

Use the Disabled and ReadOnly properties to restrict interaction with the time picker.

Disabled Time Picker

Readonly Time Picker

Razor

<TwTimePicker Id="disabled-timepicker" @bind-SelectedTime="SelectedTime" Label="Disabled Time Picker" Disabled Class="mt-3" />
<TwTimePicker Id="readonly-timepicker" @bind-SelectedTime="SelectedTime" Label="Readonly Time Picker" ReadOnly Class="mt-3" />

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwTimePickerTheme), 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.

Property	Type	Controls
`PickerRoot`	string
`IconWrapper`	string
`IconGlyph`	string
`TextfieldPadding`	string
`NativeInputAppearance`	string
`PanelWrapper`	string
`RangeStageTabsContainer`	string
`RangeStageTabInactive`	string
`StageTabBase`	string
`BodySurface`	string
`BodyRoot`	string
`BodyInner`	string
`ContentRow`	string
`Column`	string
`StepButton`	string
`NumberWrapper`	string
`NumberInput`	string
`Separator`	string
`AmPmWrapper`	string
`AmPmButtonClass`	string

Full reference: TwTimePickerTheme on the API docs.