>  ** NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<Select\>** component provides a drop-down list box that allows users to select among multiple options.
| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | - | Text of the drop-down button.|
| font | [Font](../../ui/ts-types.md#Font) | - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of the selected option in the drop-down list box.|
| selectedOptionFont | [Font](../../ui/ts-types.md#Font) | - | Text font of the selected option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of an option in the drop-down list box.|
| optionFont | [Font](../../ui/ts-types.md#Font) | - | Text font of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of an option in the drop-down list box.|
| onSelected(callback: (index: number, value?:string) => void)| Invoked when an option in the drop-down list box is selected.**index** indicates the index of the selected option.**value** indicates the value of the selected option.|
>  ** NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<TextClock\>** component displays the current system time in text format for different time zones. The time is accurate to seconds.
| timeZoneOffset | number | No| Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.|
| contorller | [TextClockContorller](#TextClockController) | No| null | Binds a controller to control the status of the **<TextClock\>** component.|
| format | string | 'hhmmss' | Time format, for example, **yyyy/mm/dd** or **yyyy-mm-dd**. Supported time format strings: <ul><li>yyyy (year)</li><li>mm (two-letter abbreviated month name)</li><li>mmm (three-letter abbreviated month name)</li><li>mmmm (full month name)</li><li>dd (two-letter abbreviated day of the week)</li><li>ddd (three-letter abbreviated day of the week)</li><li>dddd (full day of the week)</li><li>HH (24-hour format)</li><li>hh (12-hour format)</li><li>MM/mm (minute)</li><li>SS/ss (second)</li></ul>|
## TextClockController
Controller of the **<TextClock\>** component, which can be bound to the component for status control.
| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum. <br/> value: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## Example
```
@Entry
@Component
struct Second {
@State accumulateTime: number = 0
controller: TextClockController = new TextClockController()
<td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p156891651141710"><a name="p156891651141710"></a><a name="p156891651141710"></a>Space between any two adjacent child components in the horizontal layout.</p>
<tdclass="cellrowborder"valign="top"width="61%"headers="mcps1.1.5.1.4 "><pid="p1301mcpsimp"><aname="p1301mcpsimp"></a><aname="p1301mcpsimp"></a>Alignment mode of the child components in the vertical direction.</p>
