# Time Input Component
## Overview
The time input component allows users to easily select times. Users can pick times for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering times, reducing errors and ensuring accuracy. The time input component utilizes the native Android and iOS time pickers.
## Properties
### Time Input
| Property | Description | Data Type |
| ----------- | ------------------------------------------- | ------------------------------------------------------- |
| Style | Format to use when displaying selected time | Select from menu `[Hour:Minute AM/PM, Hour:Minute 24h]` |
| Font Size | Size of font when displaying time | Number |
| Font Style | Select whether font is italic | True/False |
| Font Weight | Select whether font is bold | True/False |
| Color | Color of font when displaying time | Color |
### Layout
| Property | Description | Data Type |
| ----------- | ------------------------------------------------------------------------------------ | -------------------------------------------- |
| X | Location of top left corner of time input on X-axis, where the left hand side is X=0 | Number |
| Y | Location of top left corner of time input on Y-axis, where the top side is Y=0 | Number |
| Height | Height of time input in pixels | Number |
| Width | Width of time input in pixels | Number |
| Resize Mode | Define dimensions of the time input component. | Select from list `[Stretch, Float in Place]` |
### **Style**
| Property | Description | Data Type |
| -------------- | --------------------------------------------------------------------------------------- | ------------------------------------------ |
| Visible | Toggle whether your end users can see the time input component | True/False |
| Border Style | Set whether border style is solid, dotted or dashed (only visible if border width > 0) | Select from list `[solid, dotted, dashed]` |
| Border Color | Color of border (only visible if border width > 0) | Color |
| Border Width | Width of border around time input in pixels | Number |
| Border Radius | Radius of corners of border on time input in degrees | Number |
| Shadow Color | Color of time input's shadow | Color |
| Shadow Opacity | Opacity of Time Input's shadow | Number between 0 and 100 |
| Shadow Radius | Radius of corners of time input's shadow in pixels | Number |
| Shadow Offset | How far time input's shadow should be offset, in height and width, in pixels | Number |
## Time Input Blocks
### Event Blocks
You can trigger actions to happen when an event occurs.
#### When Time Input Time Picked
This event fires when the user has selected a time using the time picker.
### Function Blocks
#### Call Time Input's Launch Picker
Opens the time picker to prompt the user to enter a time.
#### Call Time Input's Get Hour
Returns the hour from the time picker in 24-hour format. For example, if the user selects 2:30 PM, this block returns 14.
#### Call Time Input's Get Minute
Returns the minutes from the time picker in. For example, if the user selects 2:30 PM, this block returns 30.
#### Call Time Input's Get Time
Returns the selected time from the time picker in the same format as the time input's style property. For example, if the user selects 2:30 PM, and the style is set to Hour:Minute AM/PM, this block returns 2:30 PM. If the user selects 2:30 PM, and the style is set to Hour:Minute 24h, this block returns 14:30.
## Save the Time
The time the user selects automatically displays in the time input label, but if you want to save the time to be used later, you can use the block combination below to save the time as a variable.
| Event Property | Output |
| -------------- | ------------------------------------ |
| Get Time | Time in whichever format you specify |
| Get Hours | Hour of the Day from `1-24` |
| Get Minutes | Minutes from `1-60` |
### Properties Blocks
There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.
The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.
The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).
.png?alt=media&token=980aeae0-bdec-46c5-900e-27a74c618662)
