Biofarma | Bind UI

TimePicker

TimePicker is a component that provides a dialog interface for time selection, supporting both dial and keyboard input modes with customizable styling.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

TimePicker Preview

Usage

import id.co.biofarma.binduiandroid.components.timepicker.TimePicker

val showPicker = remember { mutableStateOf(false) }
 
TimePicker(
    label = "Meeting Time",
    show = showPicker,
    onTimeSelected = { time ->
        // Handle time selection
    }
)

Examples

Radius (optional)

Adjusts the corner radius of the TimePicker dialog.

TimePicker Example Radius

Time Format (optional)

Choose between 12-hour and 24-hour time formats.

TimePicker Example Format

Props

Props	Required	Default	Type	Description
id	false	""	`String`	Test tag identifier for the component
style	false	Modifier	`Modifier`	Custom modifier for styling
label	false	""	`String`	Label text shown in the dialog header
radius	false	”xs”	`String`	Corner radius size (“xs”, “sm”, “md”, “lg”)
defaultValue	false	LocalTime.now()	`LocalTime`	Initial time value
is24HourFormat	false	false	`Boolean`	Whether to use 24-hour format
onTimeSelected	false		`(LocalTime) -> Unit`	Callback when time is selected
show	false	mutableStateOf(false)	`MutableState<Boolean>`	Controls the visibility of the dialog

Notes

Dialog Interface
- Opens as a modal dialog with a customizable radius
- Provides both dial and keyboard input modes
- Toggle between input modes using the icon button
- Includes “CANCEL” and “OK” action buttons
Input Modes
- Dial mode: Traditional clock-face time selection
- Keyboard mode: Direct numeric input for hour and minute
- Switch between modes using the toggle icon in the bottom-left
Theming
- Automatically adapts to light/dark theme based on system settings
- Custom color scheme for various dialog elements
- Consistent typography using the design system’s fonts
- Configurable corner radius for different visual styles
State Management
- Uses MutableState for controlling dialog visibility
- Maintains time selection state internally
- Returns selected time through the onTimeSelected callback
- Preserves selected time until dialog is dismissed
Best Practices
- Provide meaningful labels for better user understanding
- Handle the onTimeSelected callback to process time selections
- Use appropriate radius size based on your app’s design language
- Consider user preference when choosing between 12/24-hour formats
- Test the component using the provided test tag ID

Tabs Alert