ts-methods-textpicker-dialog.md

# Text Picker Dialog Box

> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

You can display a text picker in a dialog box to allow users to select text from the given range.

## Required Permissions

None

## TextPickerDialog.show

show(options: TextPickerDialogOptions)

Shows a text picker in the given settings.

- TextPickerDialogOptions
  | Name| Type| Mandatory| Default Value| Description|
  | -------- | -------- | -------- | -------- | -------- |
  | range | string[] | Yes| - | Data selection range of the picker.|
  | selected | number | No| First element| Index value of the selected item in the range.|
  | defaultPickerItemHeight | number | No| - | Height of the default selected item in the picker.|
  | onAccept | (value: TextPickerResult) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
  | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
  | onChange | (value: TextPickerResult) => void | No| - | Triggered when the selected item in the picker changes.|

- TextPickerResult
  | Name| Type| Description| 
  | -------- | -------- | -------- |
  | value | string | Text of the selected item.| 
  | index | number | Index value of the selected item in the range.| 

## Example

```
@Entry
@Component
struct TextPickerDialogExample {
  @State select: number = 1
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("TextPickerDialog").onClick(() => {
        TextPickerDialog.show({
          range: this.fruits,
          selected: this.select,
          onAccept: (value: TextPickerResult) => {
            console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
            this.select = value.index
          },
          onCancel: () => {
            console.info("TextPickerDialog:onCancel()")
          },
          onChange: (value: TextPickerResult) => {
            console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}
```