CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--components

Comprehensive cross-platform component library that forms part of the Taro framework, providing 96 UI components that follow WeChat Mini Program standards while supporting React and Vue frameworks.

Pending
Overview
Eval results
Files

form-components.mddocs/

Form Components

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

Capabilities

Button

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

/**
 * Interactive button component
 * @supported all platforms
 */
const Button: ComponentType<ButtonProps>;

interface ButtonProps extends StandardProps, FormItemProps {
  /** Button size
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "default"
   */
  size?: keyof ButtonProps.Size;
  /** Button style type
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
   * @default "default"
   */
  type?: keyof ButtonProps.Type;
  /** Whether button is outlined (transparent background)
   * @supported weapp, alipay, swan, qq, jd, h5, rn, harmony, harmony_hybrid
   * @default false
   */
  plain?: boolean;
  /** Whether button is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Whether button shows loading state
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
   * @default false
   */
  loading?: boolean;
  /** Form action type for form submission
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   */
  formType?: 'submit' | 'reset';
  /** Open type for mini-program specific features
   * @supported weapp, alipay, swan, tt, qq, jd
   */
  openType?: keyof ButtonProps.OpenType;
  /** Hover class name
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default "button-hover"
   */
  hoverClass?: string;
  /** Hover start time in milliseconds
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default 20
   */
  hoverStartTime?: number;
  /** Hover stay time in milliseconds
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default 70
   */
  hoverStayTime?: number;
  /** App parameter for sharing
   * @supported weapp, tt, qq, jd
   */
  appParameter?: string;
  /** Language for open-type features
   * @supported weapp, tt, qq, jd
   * @default "en"
   */
  lang?: keyof ButtonProps.Lang;
  /** Session from for customer service
   * @supported weapp, tt, qq, jd
   */
  sessionFrom?: string;
  /** Send message title
   * @supported weapp, tt, qq, jd
   */
  sendMessageTitle?: string;
  /** Send message path
   * @supported weapp, tt, qq, jd
   */
  sendMessagePath?: string;
  /** Send message image
   * @supported weapp, tt, qq, jd
   */
  sendMessageImg?: string;
  /** Show message card
   * @supported weapp, tt, qq, jd
   */
  showMessageCard?: boolean;
  /** Button click callback */
  onClick?: (event: TaroEvent) => void;
  /** Get user info callback */
  onGetUserInfo?: (event: ButtonGetUserInfoEvent) => void;
  /** Contact callback */
  onContact?: (event: ButtonContactEvent) => void;
  /** Get phone number callback */
  onGetPhoneNumber?: (event: ButtonGetPhoneNumberEvent) => void;
  /** Error callback */
  onError?: (event: TaroEvent) => void;
  /** Launch app callback */
  onLaunchApp?: (event: TaroEvent) => void;
  /** Open setting callback */
  onOpenSetting?: (event: ButtonOpenSettingEvent) => void;
}

declare namespace ButtonProps {
  interface Size {
    default: '';
    mini: '';
  }
  
  interface Type {
    primary: '';
    default: '';
    warn: '';
  }
  
  interface OpenType {
    contact: '';
    share: '';
    getPhoneNumber: '';
    getUserInfo: '';
    launchApp: '';
    openSetting: '';
    feedback: '';
    getRealtimePhoneNumber: '';
    addFriend: '';
    addColorSign: '';
  }

  interface Lang {
    en: '';
    zh_CN: '';
    zh_TW: '';
  }
}

Input

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

/**
 * Text input component
 * @supported all platforms
 */
const Input: ComponentType<InputProps>;

interface InputProps extends StandardProps, FormItemProps {
  /** Input value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  value?: string;
  /** Input type
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "text"
   */
  type?: keyof InputProps.Type;
  /** Whether input is password type
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  password?: boolean;
  /** Placeholder text
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  placeholder?: string;
  /** Placeholder text style
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  placeholderStyle?: string;
  /** Placeholder text class
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   */
  placeholderClass?: string;
  /** Whether input is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Maximum input length
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 140
   */
  maxlength?: number;
  /** Cursor start position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  cursorSpacing?: number;
  /** Auto focus on component mount
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  autoFocus?: boolean;
  /** Whether to focus
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default false
   */
  focus?: boolean;
  /** Confirm type for keyboard
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "done"
   */
  confirmType?: keyof InputProps.ConfirmType;
  /** Whether confirm button is held
   * @supported weapp, tt, qq, jd
   * @default false
   */
  confirmHold?: boolean;
  /** Cursor position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 0
   */
  cursor?: number;
  /** Selection start position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  selectionStart?: number;
  /** Selection end position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  selectionEnd?: number;
  /** Whether to adjust position for keyboard
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   * @default true
   */
  adjustPosition?: boolean;
  /** Whether to hold keyboard
   * @supported weapp, tt, qq, jd
   * @default false
   */
  holdKeyboard?: boolean;
  /** Input event callback */
  onInput?: (event: InputInputEvent) => void;
  /** Focus event callback */
  onFocus?: (event: InputFocusEvent) => void;
  /** Blur event callback */
  onBlur?: (event: InputBlurEvent) => void;
  /** Confirm event callback */
  onConfirm?: (event: InputConfirmEvent) => void;
  /** Keyboard height change callback */
  onKeyboardHeightChange?: (event: InputKeyboardHeightChangeEvent) => void;
}

declare namespace InputProps {
  interface Type {
    text: '';
    number: '';
    idcard: '';
    digit: '';
    tel: '';
    safe-password: '';
    nickname: '';
  }

  interface ConfirmType {
    send: '';
    search: '';
    next: '';
    go: '';
    done: '';
  }
}

Textarea

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

/**
 * Multi-line text input component
 * @supported all platforms
 */
const Textarea: ComponentType<TextareaProps>;

interface TextareaProps extends StandardProps, FormItemProps {
  /** Textarea value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  value?: string;
  /** Placeholder text
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  placeholder?: string;
  /** Placeholder text style
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  placeholderStyle?: string;
  /** Placeholder text class
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   */
  placeholderClass?: string;
  /** Whether textarea is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Maximum input length
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 140
   */
  maxlength?: number;
  /** Auto focus on component mount
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  autoFocus?: boolean;
  /** Whether to focus
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default false
   */
  focus?: boolean;
  /** Whether to auto height
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default false
   */
  autoHeight?: boolean;
  /** Fixed height (prevents auto-height)
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   * @default false
   */
  fixed?: boolean;
  /** Cursor spacing from keyboard
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 0
   */
  cursorSpacing?: number;
  /** Cursor position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  cursor?: number;
  /** Show confirm bar
   * @supported weapp, tt, qq, jd
   * @default true
   */
  showConfirmBar?: boolean;
  /** Selection start position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  selectionStart?: number;
  /** Selection end position
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default -1
   */
  selectionEnd?: number;
  /** Whether to adjust position for keyboard
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   * @default true
   */
  adjustPosition?: boolean;
  /** Whether to hold keyboard
   * @supported weapp, tt, qq, jd
   * @default false
   */
  holdKeyboard?: boolean;
  /** Whether to disable default padding
   * @supported weapp, tt, qq, jd
   * @default false
   */
  disableDefaultPadding?: boolean;
  /** Input event callback */
  onInput?: (event: TextareaInputEvent) => void;
  /** Focus event callback */
  onFocus?: (event: TextareaFocusEvent) => void;
  /** Blur event callback */
  onBlur?: (event: TextareaBlurEvent) => void;
  /** Confirm event callback */
  onConfirm?: (event: TextareaConfirmEvent) => void;
  /** Line change callback */
  onLineChange?: (event: TextareaLineChangeEvent) => void;
  /** Keyboard height change callback */
  onKeyboardHeightChange?: (event: TextareaKeyboardHeightChangeEvent) => void;
}

Checkbox and CheckboxGroup

Checkbox input components for single and multiple selection.

/**
 * Checkbox input component
 * @supported all platforms
 */
const Checkbox: ComponentType<CheckboxProps>;

interface CheckboxProps extends StandardProps {
  /** Checkbox value identifier
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  value?: string;
  /** Whether checkbox is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Whether checkbox is checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  checked?: boolean;
  /** Checkbox color when checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#09BB07"
   */
  color?: string;
}

/**
 * Checkbox group container
 * @supported all platforms
 */
const CheckboxGroup: ComponentType<CheckboxGroupProps>;

interface CheckboxGroupProps extends StandardProps, FormItemProps {
  /** Checkbox change callback */
  onChange?: (event: CheckboxGroupChangeEvent) => void;
}

Radio and RadioGroup

Radio button components for single selection from multiple options.

/**
 * Radio button component
 * @supported all platforms
 */
const Radio: ComponentType<RadioProps>;

interface RadioProps extends StandardProps {
  /** Radio value identifier
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  value?: string;
  /** Whether radio is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Whether radio is checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  checked?: boolean;
  /** Radio color when checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#09BB07"
   */
  color?: string;
}

/**
 * Radio group container
 * @supported all platforms
 */
const RadioGroup: ComponentType<RadioGroupProps>;

interface RadioGroupProps extends StandardProps, FormItemProps {
  /** Radio group change callback */
  onChange?: (event: RadioGroupChangeEvent) => void;
}

Switch

Toggle switch component for boolean input.

/**
 * Toggle switch component
 * @supported all platforms
 */
const Switch: ComponentType<SwitchProps>;

interface SwitchProps extends StandardProps, FormItemProps {
  /** Whether switch is checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  checked?: boolean;
  /** Whether switch is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Switch type
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "switch"
   */
  type?: 'switch' | 'checkbox';
  /** Switch color when checked
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#04BE02"
   */
  color?: string;
  /** Switch change callback */
  onChange?: (event: SwitchChangeEvent) => void;
}

Slider

Slider input component for selecting values from a range.

/**
 * Slider input component
 * @supported all platforms
 */
const Slider: ComponentType<SliderProps>;

interface SliderProps extends StandardProps, FormItemProps {
  /** Minimum value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 0
   */
  min?: number;
  /** Maximum value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 100
   */
  max?: number;
  /** Step value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 1
   */
  step?: number;
  /** Whether slider is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Current value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 0
   */
  value?: number;
  /** Track color
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#e9e9e9"
   */
  backgroundColor?: string;
  /** Active track color
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#1aad19"
   */
  activeColor?: string;
  /** Selected color (alias for activeColor)
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "#1aad19"
   */
  selectedColor?: string;
  /** Whether to show current value
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  showValue?: boolean;
  /** Slider change callback */
  onChange?: (event: SliderChangeEvent) => void;
  /** Slider changing callback */
  onChanging?: (event: SliderChangeEvent) => void;
}

Form

Form container component for collecting and validating user input.

/**
 * Form container with validation
 * @supported all platforms
 */
const Form: ComponentType<FormProps>;

interface FormProps extends StandardProps {
  /** Whether to report form data to analytics
   * @supported weapp, tt, qq, jd
   * @default false
   */
  reportSubmit?: boolean;
  /** Template ID for message template
   * @supported weapp, tt, qq, jd
   */
  templateId?: string | string[];
  /** Form submit callback */
  onSubmit?: (event: FormSubmitEvent) => void;
  /** Form reset callback */
  onReset?: (event: FormResetEvent) => void;
}

Label

Label component for associating text with form controls.

/**
 * Form label component
 * @supported all platforms
 */
const Label: ComponentType<LabelProps>;

interface LabelProps extends StandardProps {
  /** Target control ID
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  for?: string;
}

Picker and PickerView

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

/**
 * Picker component for selecting values
 * @supported all platforms
 */
const Picker: ComponentType<PickerProps>;

interface PickerProps extends StandardProps, FormItemProps {
  /** Picker mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "selector"
   */
  mode?: keyof PickerProps.Mode;
  /** Whether picker is disabled
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default false
   */
  disabled?: boolean;
  /** Cancel button text
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "取消"
   */
  cancelText?: string;
  /** Confirm button text
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "确定"
   */
  confirmText?: string;
  /** Range data for selector mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  range?: string[] | number[] | Record<string, any>[];
  /** Range key for object arrays
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  rangeKey?: string;
  /** Selected value for selector mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 0
   */
  value?: number | string | number[];
  /** Start date for date mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  start?: string;
  /** End date for date mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  end?: string;
  /** Date fields for date mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "day"
   */
  fields?: 'year' | 'month' | 'day';
  /** Custom field names
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   */
  customItem?: string;
  /** Picker change callback */
  onChange?: (event: PickerChangeEvent) => void;
  /** Picker cancel callback */
  onCancel?: (event: PickerCancelEvent) => void;
  /** Column change callback for multiSelector mode */
  onColumnChange?: (event: PickerColumnChangeEvent) => void;
}

declare namespace PickerProps {
  interface Mode {
    /** Single selector */
    selector: '';
    /** Multi-column selector */
    multiSelector: '';
    /** Time picker */
    time: '';
    /** Date picker */
    date: '';
    /** Region picker */
    region: '';
  }
}

/**
 * Scrollable picker view
 * @supported all platforms
 */
const PickerView: ComponentType<PickerViewProps>;

interface PickerViewProps extends StandardProps {
  /** Selected indices for each column
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  value?: number[];
  /** Picker view change callback */
  onChange?: (event: PickerViewChangeEvent) => void;
  /** Picker view picking start callback */
  onPickStart?: (event: PickerViewPickStartEvent) => void;
  /** Picker view picking end callback */
  onPickEnd?: (event: PickerViewPickEndEvent) => void;
}

/**
 * Individual column in PickerView
 * @supported all platforms
 */
const PickerViewColumn: ComponentType<PickerViewColumnProps>;

interface PickerViewColumnProps extends StandardProps {
  // Column-specific properties
}

Editor

Rich text editor component for content creation and editing.

/**
 * Rich text editor component
 * @supported weapp, tt, qq, jd, h5
 */
const Editor: ComponentType<EditorProps>;

interface EditorProps extends StandardProps {
  /** Whether editor is read-only
   * @supported weapp, tt, qq, jd, h5
   * @default false
   */
  readOnly?: boolean;
  /** Editor placeholder text
   * @supported weapp, tt, qq, jd, h5
   */
  placeholder?: string;
  /** Whether to show image size controls
   * @supported weapp, tt, qq, jd, h5
   * @default false
   */
  showImgSize?: boolean;
  /** Whether to show image toolbar
   * @supported weapp, tt, qq, jd, h5
   * @default false
   */
  showImgToolbar?: boolean;
  /** Whether to show image resize controls
   * @supported weapp, tt, qq, jd, h5
   * @default false
   */
  showImgResize?: boolean;
  /** Editor ready callback */
  onReady?: (event: EditorReadyEvent) => void;
  /** Editor focus callback */
  onFocus?: (event: EditorFocusEvent) => void;
  /** Editor blur callback */
  onBlur?: (event: EditorBlurEvent) => void;
  /** Editor input callback */
  onInput?: (event: EditorInputEvent) => void;
  /** Editor status change callback */
  onStatusChange?: (event: EditorStatusChangeEvent) => void;
}

KeyboardAccessory

Keyboard accessory bar component for input enhancement.

/**
 * Keyboard accessory bar component
 * @supported weapp, tt, qq, jd
 */
const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>;

interface KeyboardAccessoryProps extends StandardProps {
  /** Target input component ID
   * @supported weapp, tt, qq, jd
   */
  targetId?: string;
}

Types

// Picker event interfaces
interface PickerChangeEvent extends TaroEvent {
  detail: {
    value: number | string | number[];
  };
}

interface PickerCancelEvent extends TaroEvent {
  detail: {
    // Cancel event details
  };
}

interface PickerColumnChangeEvent extends TaroEvent {
  detail: {
    column: number;
    value: number;
  };
}

interface PickerViewChangeEvent extends TaroEvent {
  detail: {
    value: number[];
  };
}

interface PickerViewPickStartEvent extends TaroEvent {
  detail: {
    // Pick start details
  };
}

interface PickerViewPickEndEvent extends TaroEvent {
  detail: {
    // Pick end details
  };
}

// Editor event interfaces
interface EditorReadyEvent extends TaroEvent {
  detail: {
    // Editor ready details
  };
}

interface EditorFocusEvent extends TaroEvent {
  detail: {
    // Editor focus details
  };
}

interface EditorBlurEvent extends TaroEvent {
  detail: {
    // Editor blur details
  };
}

interface EditorInputEvent extends TaroEvent {
  detail: {
    html: string;
    text: string;
    delta: any;
  };
}

interface EditorStatusChangeEvent extends TaroEvent {
  detail: {
    // Editor status details
  };
}

Original Types

// Button event interfaces
interface ButtonGetUserInfoEvent extends TaroEvent {
  detail: {
    userInfo: any;
    rawData: string;
    signature: string;
    encryptedData: string;
    iv: string;
    errMsg: string;
  };
}

interface ButtonContactEvent extends TaroEvent {
  detail: {
    errMsg: string;
  };
}

interface ButtonGetPhoneNumberEvent extends TaroEvent {
  detail: {
    errMsg: string;
    encryptedData: string;
    iv: string;
  };
}

interface ButtonOpenSettingEvent extends TaroEvent {
  detail: {
    authSetting: Record<string, boolean>;
  };
}

// Input event interfaces
interface InputInputEvent extends TaroEvent {
  detail: {
    value: string;
    cursor: number;
    keyCode: number;
  };
}

interface InputFocusEvent extends TaroEvent {
  detail: {
    value: string;
    height: number;
  };
}

interface InputBlurEvent extends TaroEvent {
  detail: {
    value: string;
    cursor: number;
  };
}

interface InputConfirmEvent extends TaroEvent {
  detail: {
    value: string;
  };
}

interface InputKeyboardHeightChangeEvent extends TaroEvent {
  detail: {
    height: number;
    duration: number;
  };
}

// Textarea event interfaces
interface TextareaInputEvent extends TaroEvent {
  detail: {
    value: string;
    cursor: number;
    keyCode: number;
  };
}

interface TextareaFocusEvent extends TaroEvent {
  detail: {
    value: string;
    height: number;
  };
}

interface TextareaBlurEvent extends TaroEvent {
  detail: {
    value: string;
    cursor: number;
  };
}

interface TextareaConfirmEvent extends TaroEvent {
  detail: {
    value: string;
  };
}

interface TextareaLineChangeEvent extends TaroEvent {
  detail: {
    height: number;
    heightRpx: number;
    lineCount: number;
  };
}

interface TextareaKeyboardHeightChangeEvent extends TaroEvent {
  detail: {
    height: number;
    duration: number;
  };
}

// Checkbox and Radio event interfaces
interface CheckboxGroupChangeEvent extends TaroEvent {
  detail: {
    value: string[];
  };
}

interface RadioGroupChangeEvent extends TaroEvent {
  detail: {
    value: string;
  };
}

// Switch event interface
interface SwitchChangeEvent extends TaroEvent {
  detail: {
    value: boolean;
  };
}

// Slider event interface
interface SliderChangeEvent extends TaroEvent {
  detail: {
    value: number;
  };
}

// Form event interfaces
interface FormSubmitEvent extends TaroEvent {
  detail: {
    value: Record<string, any>;
  };
}

interface FormResetEvent extends TaroEvent {
  detail: {
    // Reset event details
  };
}

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--components

docs

basic-content.md

form-components.md

index.md

media-components.md

navigation.md

platform-integration.md

skyline-components.md

view-containers.md

tile.json