1# TextPicker 2 3The **\<TextPicker>** component allows users to scroll to select text. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) 18 19Creates a text picker based on the selection range specified by **range**. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| range | string[] \| [Resource](ts-types.md#resource) | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If it is dynamically changed to an empty array, the current value remains displayed.| 26| selected | number | No| Index of the default item in the range.<br>Default value: **0**| 27| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item| 28 29## Attributes 30 31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 32 33| Name| Type| Description| 34| -------- | -------- | -------- | 35| defaultPickerItemHeight | number \| string | Height of each item in the picker.| 36 37## Events 38 39In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 40 41| Name| Description| 42| -------- | -------- | 43| onAccept(callback: (value: string, index: number) => void) | Triggered when the OK button in the dialog box is clicked.<br><br>- **value**: value of the selected item.<br>- **index**: index of the selected item.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| 44| onCancel(callback: () => void) | Triggered when the Cancel button in the dialog box is clicked.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| 45| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.<br>- **index**: index of the selected item.| 46 47 48## Example 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct TextPickerExample { 55 private select: number = 1 56 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 57 58 build() { 59 Column() { 60 TextPicker({ range: this.fruits, selected: this.select }) 61 .onChange((value: string, index: number) => { 62 console.info('Picker item changed, value: ' + value + ', index: ' + index) 63 }) 64 } 65 } 66} 67``` 68 69 70
