sufi-blazor/docs/components/forms/SbTimePicker.md

SbTimePicker

A time picker component with hour, minute, and optional second selection. Supports 12/24 hour formats.

Parameters

Parameter	Type	Default	Description
Value	TimeOnly?	null	The selected time (two-way bindable)
ValueChanged	EventCallback<TimeOnly?>	-	Callback when time changes
Use24Hour	bool	true	Whether to use 24-hour format
ShowSeconds	bool	false	Whether to show seconds selector
MinuteStep	int	1	Minute step interval
SecondStep	int	1	Second step interval
Placeholder	string?	null	Placeholder when no time selected; when null, uses localized default
Clearable	bool	true	Whether to show clear button
Disabled	bool	false	Whether the picker is disabled
Id	string?	null	Element ID
Label	string?	null	Label text displayed above the picker
Required	bool	false	Whether the field is required
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
ValueChanged	EventCallback<TimeOnly?>	Fired when the time changes

CSS Classes

• sb-timepicker - Base class
• sb-timepicker__label - Label element
• sb-timepicker__required - Required asterisk
• sb-timepicker__trigger - Button that opens the picker
• sb-timepicker__trigger--disabled - Disabled trigger
• sb-timepicker__value - Selected value display
• sb-timepicker__placeholder - Placeholder text
• sb-timepicker__clear - Clear button
• sb-timepicker__icon - Clock icon
• sb-timepicker__dropdown - Dropdown panel
• sb-timepicker__dropdown--flip-up - Dropdown flips upward
• sb-timepicker__selectors - Selectors container
• sb-timepicker__column - Hour/minute/second column
• sb-timepicker__column--period - AM/PM column (when Use24Hour is false)
• sb-timepicker__column-header - Column header text
• sb-timepicker__scroll - Scrollable options area
• sb-timepicker__option - Individual time option
• sb-timepicker__option--selected - Selected option
• sb-timepicker__separator - Colon separator
• sb-timepicker__footer - Footer with action buttons
• sb-timepicker__now-btn - "Now" button
• sb-timepicker__apply-btn - Apply button (localized)

Accessibility

• Clear button has aria-label
• Keyboard: Tab to navigate columns, Enter to select

Examples

Basic Usage

<SbTimePicker @bind-Value="selectedTime" Label="Appointment Time" />

12-Hour Format

<SbTimePicker @bind-Value="time" 
              Use24Hour="false"
              Label="Meeting Time" />

With Seconds

<SbTimePicker @bind-Value="preciseTime" 
              ShowSeconds="true"
              Label="Exact Time" />

15-Minute Steps

<SbTimePicker @bind-Value="appointmentTime" 
              MinuteStep="15"
              Label="Book Appointment" />

Required Field

<SbTimePicker @bind-Value="deadline" 
              Label="Deadline"
              Required="true"
              Clearable="false" />

Disabled State

<SbTimePicker Value="@lockedTime" 
              Label="Fixed Time"
              Disabled="true" />