0
# Form Components
1

2
Interactive form elements including inputs, buttons, selectors, and validation components for building user interfaces.
3

4
## Capabilities
5

6
### Button
7

8
Interactive button component with multiple styles, sizes, and platform-specific features.
9

10
```typescript { .api }
11
/**
12
 * Interactive button component
13
 * @supported all platforms
14
 */
15
const Button: ComponentType<ButtonProps>;
16

17
interface ButtonProps extends StandardProps, FormItemProps {
18
  /** Button size
19
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
20
   * @default "default"
21
   */
22
  size?: keyof ButtonProps.Size;
23
  /** Button style type
24
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
25
   * @default "default"
26
   */
27
  type?: keyof ButtonProps.Type;
28
  /** Whether button is outlined (transparent background)
29
   * @supported weapp, alipay, swan, qq, jd, h5, rn, harmony, harmony_hybrid
30
   * @default false
31
   */
32
  plain?: boolean;
33
  /** Whether button is disabled
34
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
35
   * @default false
36
   */
37
  disabled?: boolean;
38
  /** Whether button shows loading state
39
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
40
   * @default false
41
   */
42
  loading?: boolean;
43
  /** Form action type for form submission
44
   * @supported weapp, alipay, swan, tt, qq, jd, h5
45
   */
46
  formType?: 'submit' | 'reset';
47
  /** Open type for mini-program specific features
48
   * @supported weapp, alipay, swan, tt, qq, jd
49
   */
50
  openType?: keyof ButtonProps.OpenType;
51
  /** Hover class name
52
   * @supported weapp, alipay, swan, tt, qq, jd
53
   * @default "button-hover"
54
   */
55
  hoverClass?: string;
56
  /** Hover start time in milliseconds
57
   * @supported weapp, alipay, swan, tt, qq, jd
58
   * @default 20
59
   */
60
  hoverStartTime?: number;
61
  /** Hover stay time in milliseconds
62
   * @supported weapp, alipay, swan, tt, qq, jd
63
   * @default 70
64
   */
65
  hoverStayTime?: number;
66
  /** App parameter for sharing
67
   * @supported weapp, tt, qq, jd
68
   */
69
  appParameter?: string;
70
  /** Language for open-type features
71
   * @supported weapp, tt, qq, jd
72
   * @default "en"
73
   */
74
  lang?: keyof ButtonProps.Lang;
75
  /** Session from for customer service
76
   * @supported weapp, tt, qq, jd
77
   */
78
  sessionFrom?: string;
79
  /** Send message title
80
   * @supported weapp, tt, qq, jd
81
   */
82
  sendMessageTitle?: string;
83
  /** Send message path
84
   * @supported weapp, tt, qq, jd
85
   */
86
  sendMessagePath?: string;
87
  /** Send message image
88
   * @supported weapp, tt, qq, jd
89
   */
90
  sendMessageImg?: string;
91
  /** Show message card
92
   * @supported weapp, tt, qq, jd
93
   */
94
  showMessageCard?: boolean;
95
  /** Button click callback */
96
  onClick?: (event: TaroEvent) => void;
97
  /** Get user info callback */
98
  onGetUserInfo?: (event: ButtonGetUserInfoEvent) => void;
99
  /** Contact callback */
100
  onContact?: (event: ButtonContactEvent) => void;
101
  /** Get phone number callback */
102
  onGetPhoneNumber?: (event: ButtonGetPhoneNumberEvent) => void;
103
  /** Error callback */
104
  onError?: (event: TaroEvent) => void;
105
  /** Launch app callback */
106
  onLaunchApp?: (event: TaroEvent) => void;
107
  /** Open setting callback */
108
  onOpenSetting?: (event: ButtonOpenSettingEvent) => void;
109
}
110

111
declare namespace ButtonProps {
112
  interface Size {
113
    default: '';
114
    mini: '';
115
  }
116
  
117
  interface Type {
118
    primary: '';
119
    default: '';
120
    warn: '';
121
  }
122
  
123
  interface OpenType {
124
    contact: '';
125
    share: '';
126
    getPhoneNumber: '';
127
    getUserInfo: '';
128
    launchApp: '';
129
    openSetting: '';
130
    feedback: '';
131
    getRealtimePhoneNumber: '';
132
    addFriend: '';
133
    addColorSign: '';
134
  }
135

136
  interface Lang {
137
    en: '';
138
    zh_CN: '';
139
    zh_TW: '';
140
  }
141
}
142
```
143

144
### Input
145

146
Text input component with various input types and platform-specific features.
147

148
```typescript { .api }
149
/**
150
 * Text input component
151
 * @supported all platforms
152
 */
153
const Input: ComponentType<InputProps>;
154

155
interface InputProps extends StandardProps, FormItemProps {
156
  /** Input value
157
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
158
   */
159
  value?: string;
160
  /** Input type
161
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
162
   * @default "text"
163
   */
164
  type?: keyof InputProps.Type;
165
  /** Whether input is password type
166
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
167
   * @default false
168
   */
169
  password?: boolean;
170
  /** Placeholder text
171
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
172
   */
173
  placeholder?: string;
174
  /** Placeholder text style
175
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
176
   */
177
  placeholderStyle?: string;
178
  /** Placeholder text class
179
   * @supported weapp, alipay, swan, tt, qq, jd, h5
180
   */
181
  placeholderClass?: string;
182
  /** Whether input is disabled
183
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
184
   * @default false
185
   */
186
  disabled?: boolean;
187
  /** Maximum input length
188
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
189
   * @default 140
190
   */
191
  maxlength?: number;
192
  /** Cursor start position
193
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
194
   * @default -1
195
   */
196
  cursorSpacing?: number;
197
  /** Auto focus on component mount
198
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
199
   * @default false
200
   */
201
  autoFocus?: boolean;
202
  /** Whether to focus
203
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
204
   * @default false
205
   */
206
  focus?: boolean;
207
  /** Confirm type for keyboard
208
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
209
   * @default "done"
210
   */
211
  confirmType?: keyof InputProps.ConfirmType;
212
  /** Whether confirm button is held
213
   * @supported weapp, tt, qq, jd
214
   * @default false
215
   */
216
  confirmHold?: boolean;
217
  /** Cursor position
218
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
219
   * @default 0
220
   */
221
  cursor?: number;
222
  /** Selection start position
223
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
224
   * @default -1
225
   */
226
  selectionStart?: number;
227
  /** Selection end position
228
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
229
   * @default -1
230
   */
231
  selectionEnd?: number;
232
  /** Whether to adjust position for keyboard
233
   * @supported weapp, alipay, swan, tt, qq, jd, h5
234
   * @default true
235
   */
236
  adjustPosition?: boolean;
237
  /** Whether to hold keyboard
238
   * @supported weapp, tt, qq, jd
239
   * @default false
240
   */
241
  holdKeyboard?: boolean;
242
  /** Input event callback */
243
  onInput?: (event: InputInputEvent) => void;
244
  /** Focus event callback */
245
  onFocus?: (event: InputFocusEvent) => void;
246
  /** Blur event callback */
247
  onBlur?: (event: InputBlurEvent) => void;
248
  /** Confirm event callback */
249
  onConfirm?: (event: InputConfirmEvent) => void;
250
  /** Keyboard height change callback */
251
  onKeyboardHeightChange?: (event: InputKeyboardHeightChangeEvent) => void;
252
}
253

254
declare namespace InputProps {
255
  interface Type {
256
    text: '';
257
    number: '';
258
    idcard: '';
259
    digit: '';
260
    tel: '';
261
    safe-password: '';
262
    nickname: '';
263
  }
264

265
  interface ConfirmType {
266
    send: '';
267
    search: '';
268
    next: '';
269
    go: '';
270
    done: '';
271
  }
272
}
273
```
274

275
### Textarea
276

277
Multi-line text input component with auto-resize and character counting features.
278

279
```typescript { .api }
280
/**
281
 * Multi-line text input component
282
 * @supported all platforms
283
 */
284
const Textarea: ComponentType<TextareaProps>;
285

286
interface TextareaProps extends StandardProps, FormItemProps {
287
  /** Textarea value
288
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
289
   */
290
  value?: string;
291
  /** Placeholder text
292
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
293
   */
294
  placeholder?: string;
295
  /** Placeholder text style
296
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
297
   */
298
  placeholderStyle?: string;
299
  /** Placeholder text class
300
   * @supported weapp, alipay, swan, tt, qq, jd, h5
301
   */
302
  placeholderClass?: string;
303
  /** Whether textarea is disabled
304
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
305
   * @default false
306
   */
307
  disabled?: boolean;
308
  /** Maximum input length
309
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
310
   * @default 140
311
   */
312
  maxlength?: number;
313
  /** Auto focus on component mount
314
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
315
   * @default false
316
   */
317
  autoFocus?: boolean;
318
  /** Whether to focus
319
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
320
   * @default false
321
   */
322
  focus?: boolean;
323
  /** Whether to auto height
324
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
325
   * @default false
326
   */
327
  autoHeight?: boolean;
328
  /** Fixed height (prevents auto-height)
329
   * @supported weapp, alipay, swan, tt, qq, jd, h5
330
   * @default false
331
   */
332
  fixed?: boolean;
333
  /** Cursor spacing from keyboard
334
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
335
   * @default 0
336
   */
337
  cursorSpacing?: number;
338
  /** Cursor position
339
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
340
   * @default -1
341
   */
342
  cursor?: number;
343
  /** Show confirm bar
344
   * @supported weapp, tt, qq, jd
345
   * @default true
346
   */
347
  showConfirmBar?: boolean;
348
  /** Selection start position
349
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
350
   * @default -1
351
   */
352
  selectionStart?: number;
353
  /** Selection end position
354
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
355
   * @default -1
356
   */
357
  selectionEnd?: number;
358
  /** Whether to adjust position for keyboard
359
   * @supported weapp, alipay, swan, tt, qq, jd, h5
360
   * @default true
361
   */
362
  adjustPosition?: boolean;
363
  /** Whether to hold keyboard
364
   * @supported weapp, tt, qq, jd
365
   * @default false
366
   */
367
  holdKeyboard?: boolean;
368
  /** Whether to disable default padding
369
   * @supported weapp, tt, qq, jd
370
   * @default false
371
   */
372
  disableDefaultPadding?: boolean;
373
  /** Input event callback */
374
  onInput?: (event: TextareaInputEvent) => void;
375
  /** Focus event callback */
376
  onFocus?: (event: TextareaFocusEvent) => void;
377
  /** Blur event callback */
378
  onBlur?: (event: TextareaBlurEvent) => void;
379
  /** Confirm event callback */
380
  onConfirm?: (event: TextareaConfirmEvent) => void;
381
  /** Line change callback */
382
  onLineChange?: (event: TextareaLineChangeEvent) => void;
383
  /** Keyboard height change callback */
384
  onKeyboardHeightChange?: (event: TextareaKeyboardHeightChangeEvent) => void;
385
}
386
```
387

388
### Checkbox and CheckboxGroup
389

390
Checkbox input components for single and multiple selection.
391

392
```typescript { .api }
393
/**
394
 * Checkbox input component
395
 * @supported all platforms
396
 */
397
const Checkbox: ComponentType<CheckboxProps>;
398

399
interface CheckboxProps extends StandardProps {
400
  /** Checkbox value identifier
401
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
402
   */
403
  value?: string;
404
  /** Whether checkbox is disabled
405
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
406
   * @default false
407
   */
408
  disabled?: boolean;
409
  /** Whether checkbox is checked
410
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
411
   * @default false
412
   */
413
  checked?: boolean;
414
  /** Checkbox color when checked
415
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
416
   * @default "#09BB07"
417
   */
418
  color?: string;
419
}
420

421
/**
422
 * Checkbox group container
423
 * @supported all platforms
424
 */
425
const CheckboxGroup: ComponentType<CheckboxGroupProps>;
426

427
interface CheckboxGroupProps extends StandardProps, FormItemProps {
428
  /** Checkbox change callback */
429
  onChange?: (event: CheckboxGroupChangeEvent) => void;
430
}
431
```
432

433
### Radio and RadioGroup
434

435
Radio button components for single selection from multiple options.
436

437
```typescript { .api }
438
/**
439
 * Radio button component
440
 * @supported all platforms
441
 */
442
const Radio: ComponentType<RadioProps>;
443

444
interface RadioProps extends StandardProps {
445
  /** Radio value identifier
446
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
447
   */
448
  value?: string;
449
  /** Whether radio is disabled
450
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
451
   * @default false
452
   */
453
  disabled?: boolean;
454
  /** Whether radio is checked
455
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
456
   * @default false
457
   */
458
  checked?: boolean;
459
  /** Radio color when checked
460
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
461
   * @default "#09BB07"
462
   */
463
  color?: string;
464
}
465

466
/**
467
 * Radio group container
468
 * @supported all platforms
469
 */
470
const RadioGroup: ComponentType<RadioGroupProps>;
471

472
interface RadioGroupProps extends StandardProps, FormItemProps {
473
  /** Radio group change callback */
474
  onChange?: (event: RadioGroupChangeEvent) => void;
475
}
476
```
477

478
### Switch
479

480
Toggle switch component for boolean input.
481

482
```typescript { .api }
483
/**
484
 * Toggle switch component
485
 * @supported all platforms
486
 */
487
const Switch: ComponentType<SwitchProps>;
488

489
interface SwitchProps extends StandardProps, FormItemProps {
490
  /** Whether switch is checked
491
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
492
   * @default false
493
   */
494
  checked?: boolean;
495
  /** Whether switch is disabled
496
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
497
   * @default false
498
   */
499
  disabled?: boolean;
500
  /** Switch type
501
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
502
   * @default "switch"
503
   */
504
  type?: 'switch' | 'checkbox';
505
  /** Switch color when checked
506
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
507
   * @default "#04BE02"
508
   */
509
  color?: string;
510
  /** Switch change callback */
511
  onChange?: (event: SwitchChangeEvent) => void;
512
}
513
```
514

515
### Slider
516

517
Slider input component for selecting values from a range.
518

519
```typescript { .api }
520
/**
521
 * Slider input component
522
 * @supported all platforms
523
 */
524
const Slider: ComponentType<SliderProps>;
525

526
interface SliderProps extends StandardProps, FormItemProps {
527
  /** Minimum value
528
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
529
   * @default 0
530
   */
531
  min?: number;
532
  /** Maximum value
533
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
534
   * @default 100
535
   */
536
  max?: number;
537
  /** Step value
538
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
539
   * @default 1
540
   */
541
  step?: number;
542
  /** Whether slider is disabled
543
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
544
   * @default false
545
   */
546
  disabled?: boolean;
547
  /** Current value
548
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
549
   * @default 0
550
   */
551
  value?: number;
552
  /** Track color
553
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
554
   * @default "#e9e9e9"
555
   */
556
  backgroundColor?: string;
557
  /** Active track color
558
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
559
   * @default "#1aad19"
560
   */
561
  activeColor?: string;
562
  /** Selected color (alias for activeColor)
563
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
564
   * @default "#1aad19"
565
   */
566
  selectedColor?: string;
567
  /** Whether to show current value
568
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
569
   * @default false
570
   */
571
  showValue?: boolean;
572
  /** Slider change callback */
573
  onChange?: (event: SliderChangeEvent) => void;
574
  /** Slider changing callback */
575
  onChanging?: (event: SliderChangeEvent) => void;
576
}
577
```
578

579
### Form
580

581
Form container component for collecting and validating user input.
582

583
```typescript { .api }
584
/**
585
 * Form container with validation
586
 * @supported all platforms
587
 */
588
const Form: ComponentType<FormProps>;
589

590
interface FormProps extends StandardProps {
591
  /** Whether to report form data to analytics
592
   * @supported weapp, tt, qq, jd
593
   * @default false
594
   */
595
  reportSubmit?: boolean;
596
  /** Template ID for message template
597
   * @supported weapp, tt, qq, jd
598
   */
599
  templateId?: string | string[];
600
  /** Form submit callback */
601
  onSubmit?: (event: FormSubmitEvent) => void;
602
  /** Form reset callback */
603
  onReset?: (event: FormResetEvent) => void;
604
}
605
```
606

607
### Label
608

609
Label component for associating text with form controls.
610

611
```typescript { .api }
612
/**
613
 * Form label component
614
 * @supported all platforms
615
 */
616
const Label: ComponentType<LabelProps>;
617

618
interface LabelProps extends StandardProps {
619
  /** Target control ID
620
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
621
   */
622
  for?: string;
623
}
624
```
625

626
### Picker and PickerView
627

628
Picker components for selecting values from lists and custom picker interfaces.
629

630
```typescript { .api }
631
/**
632
 * Picker component for selecting values
633
 * @supported all platforms
634
 */
635
const Picker: ComponentType<PickerProps>;
636

637
interface PickerProps extends StandardProps, FormItemProps {
638
  /** Picker mode
639
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
640
   * @default "selector"
641
   */
642
  mode?: keyof PickerProps.Mode;
643
  /** Whether picker is disabled
644
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
645
   * @default false
646
   */
647
  disabled?: boolean;
648
  /** Cancel button text
649
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
650
   * @default "取消"
651
   */
652
  cancelText?: string;
653
  /** Confirm button text
654
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
655
   * @default "确定"
656
   */
657
  confirmText?: string;
658
  /** Range data for selector mode
659
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
660
   */
661
  range?: string[] | number[] | Record<string, any>[];
662
  /** Range key for object arrays
663
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
664
   */
665
  rangeKey?: string;
666
  /** Selected value for selector mode
667
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
668
   * @default 0
669
   */
670
  value?: number | string | number[];
671
  /** Start date for date mode
672
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
673
   */
674
  start?: string;
675
  /** End date for date mode
676
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
677
   */
678
  end?: string;
679
  /** Date fields for date mode
680
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
681
   * @default "day"
682
   */
683
  fields?: 'year' | 'month' | 'day';
684
  /** Custom field names
685
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
686
   */
687
  customItem?: string;
688
  /** Picker change callback */
689
  onChange?: (event: PickerChangeEvent) => void;
690
  /** Picker cancel callback */
691
  onCancel?: (event: PickerCancelEvent) => void;
692
  /** Column change callback for multiSelector mode */
693
  onColumnChange?: (event: PickerColumnChangeEvent) => void;
694
}
695

696
declare namespace PickerProps {
697
  interface Mode {
698
    /** Single selector */
699
    selector: '';
700
    /** Multi-column selector */
701
    multiSelector: '';
702
    /** Time picker */
703
    time: '';
704
    /** Date picker */
705
    date: '';
706
    /** Region picker */
707
    region: '';
708
  }
709
}
710

711
/**
712
 * Scrollable picker view
713
 * @supported all platforms
714
 */
715
const PickerView: ComponentType<PickerViewProps>;
716

717
interface PickerViewProps extends StandardProps {
718
  /** Selected indices for each column
719
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
720
   */
721
  value?: number[];
722
  /** Picker view change callback */
723
  onChange?: (event: PickerViewChangeEvent) => void;
724
  /** Picker view picking start callback */
725
  onPickStart?: (event: PickerViewPickStartEvent) => void;
726
  /** Picker view picking end callback */
727
  onPickEnd?: (event: PickerViewPickEndEvent) => void;
728
}
729

730
/**
731
 * Individual column in PickerView
732
 * @supported all platforms
733
 */
734
const PickerViewColumn: ComponentType<PickerViewColumnProps>;
735

736
interface PickerViewColumnProps extends StandardProps {
737
  // Column-specific properties
738
}
739
```
740

741
### Editor
742

743
Rich text editor component for content creation and editing.
744

745
```typescript { .api }
746
/**
747
 * Rich text editor component
748
 * @supported weapp, tt, qq, jd, h5
749
 */
750
const Editor: ComponentType<EditorProps>;
751

752
interface EditorProps extends StandardProps {
753
  /** Whether editor is read-only
754
   * @supported weapp, tt, qq, jd, h5
755
   * @default false
756
   */
757
  readOnly?: boolean;
758
  /** Editor placeholder text
759
   * @supported weapp, tt, qq, jd, h5
760
   */
761
  placeholder?: string;
762
  /** Whether to show image size controls
763
   * @supported weapp, tt, qq, jd, h5
764
   * @default false
765
   */
766
  showImgSize?: boolean;
767
  /** Whether to show image toolbar
768
   * @supported weapp, tt, qq, jd, h5
769
   * @default false
770
   */
771
  showImgToolbar?: boolean;
772
  /** Whether to show image resize controls
773
   * @supported weapp, tt, qq, jd, h5
774
   * @default false
775
   */
776
  showImgResize?: boolean;
777
  /** Editor ready callback */
778
  onReady?: (event: EditorReadyEvent) => void;
779
  /** Editor focus callback */
780
  onFocus?: (event: EditorFocusEvent) => void;
781
  /** Editor blur callback */
782
  onBlur?: (event: EditorBlurEvent) => void;
783
  /** Editor input callback */
784
  onInput?: (event: EditorInputEvent) => void;
785
  /** Editor status change callback */
786
  onStatusChange?: (event: EditorStatusChangeEvent) => void;
787
}
788
```
789

790
### KeyboardAccessory
791

792
Keyboard accessory bar component for input enhancement.
793

794
```typescript { .api }
795
/**
796
 * Keyboard accessory bar component
797
 * @supported weapp, tt, qq, jd
798
 */
799
const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>;
800

801
interface KeyboardAccessoryProps extends StandardProps {
802
  /** Target input component ID
803
   * @supported weapp, tt, qq, jd
804
   */
805
  targetId?: string;
806
}
807
```
808

809
## Types
810

811
```typescript { .api }
812
// Picker event interfaces
813
interface PickerChangeEvent extends TaroEvent {
814
  detail: {
815
    value: number | string | number[];
816
  };
817
}
818

819
interface PickerCancelEvent extends TaroEvent {
820
  detail: {
821
    // Cancel event details
822
  };
823
}
824

825
interface PickerColumnChangeEvent extends TaroEvent {
826
  detail: {
827
    column: number;
828
    value: number;
829
  };
830
}
831

832
interface PickerViewChangeEvent extends TaroEvent {
833
  detail: {
834
    value: number[];
835
  };
836
}
837

838
interface PickerViewPickStartEvent extends TaroEvent {
839
  detail: {
840
    // Pick start details
841
  };
842
}
843

844
interface PickerViewPickEndEvent extends TaroEvent {
845
  detail: {
846
    // Pick end details
847
  };
848
}
849

850
// Editor event interfaces
851
interface EditorReadyEvent extends TaroEvent {
852
  detail: {
853
    // Editor ready details
854
  };
855
}
856

857
interface EditorFocusEvent extends TaroEvent {
858
  detail: {
859
    // Editor focus details
860
  };
861
}
862

863
interface EditorBlurEvent extends TaroEvent {
864
  detail: {
865
    // Editor blur details
866
  };
867
}
868

869
interface EditorInputEvent extends TaroEvent {
870
  detail: {
871
    html: string;
872
    text: string;
873
    delta: any;
874
  };
875
}
876

877
interface EditorStatusChangeEvent extends TaroEvent {
878
  detail: {
879
    // Editor status details
880
  };
881
}
882
```
883

884
## Original Types
885

886
```typescript { .api }
887
// Button event interfaces
888
interface ButtonGetUserInfoEvent extends TaroEvent {
889
  detail: {
890
    userInfo: any;
891
    rawData: string;
892
    signature: string;
893
    encryptedData: string;
894
    iv: string;
895
    errMsg: string;
896
  };
897
}
898

899
interface ButtonContactEvent extends TaroEvent {
900
  detail: {
901
    errMsg: string;
902
  };
903
}
904

905
interface ButtonGetPhoneNumberEvent extends TaroEvent {
906
  detail: {
907
    errMsg: string;
908
    encryptedData: string;
909
    iv: string;
910
  };
911
}
912

913
interface ButtonOpenSettingEvent extends TaroEvent {
914
  detail: {
915
    authSetting: Record<string, boolean>;
916
  };
917
}
918

919
// Input event interfaces
920
interface InputInputEvent extends TaroEvent {
921
  detail: {
922
    value: string;
923
    cursor: number;
924
    keyCode: number;
925
  };
926
}
927

928
interface InputFocusEvent extends TaroEvent {
929
  detail: {
930
    value: string;
931
    height: number;
932
  };
933
}
934

935
interface InputBlurEvent extends TaroEvent {
936
  detail: {
937
    value: string;
938
    cursor: number;
939
  };
940
}
941

942
interface InputConfirmEvent extends TaroEvent {
943
  detail: {
944
    value: string;
945
  };
946
}
947

948
interface InputKeyboardHeightChangeEvent extends TaroEvent {
949
  detail: {
950
    height: number;
951
    duration: number;
952
  };
953
}
954

955
// Textarea event interfaces
956
interface TextareaInputEvent extends TaroEvent {
957
  detail: {
958
    value: string;
959
    cursor: number;
960
    keyCode: number;
961
  };
962
}
963

964
interface TextareaFocusEvent extends TaroEvent {
965
  detail: {
966
    value: string;
967
    height: number;
968
  };
969
}
970

971
interface TextareaBlurEvent extends TaroEvent {
972
  detail: {
973
    value: string;
974
    cursor: number;
975
  };
976
}
977

978
interface TextareaConfirmEvent extends TaroEvent {
979
  detail: {
980
    value: string;
981
  };
982
}
983

984
interface TextareaLineChangeEvent extends TaroEvent {
985
  detail: {
986
    height: number;
987
    heightRpx: number;
988
    lineCount: number;
989
  };
990
}
991

992
interface TextareaKeyboardHeightChangeEvent extends TaroEvent {
993
  detail: {
994
    height: number;
995
    duration: number;
996
  };
997
}
998

999
// Checkbox and Radio event interfaces
1000
interface CheckboxGroupChangeEvent extends TaroEvent {
1001
  detail: {
1002
    value: string[];
1003
  };
1004
}
1005

1006
interface RadioGroupChangeEvent extends TaroEvent {
1007
  detail: {
1008
    value: string;
1009
  };
1010
}
1011

1012
// Switch event interface
1013
interface SwitchChangeEvent extends TaroEvent {
1014
  detail: {
1015
    value: boolean;
1016
  };
1017
}
1018

1019
// Slider event interface
1020
interface SliderChangeEvent extends TaroEvent {
1021
  detail: {
1022
    value: number;
1023
  };
1024
}
1025

1026
// Form event interfaces
1027
interface FormSubmitEvent extends TaroEvent {
1028
  detail: {
1029
    value: Record<string, any>;
1030
  };
1031
}
1032

1033
interface FormResetEvent extends TaroEvent {
1034
  detail: {
1035
    // Reset event details
1036
  };
1037
}
1038
```