For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/input.md.
lynx-ui logo
lynx-ui
  • English
  • <Input>

    A headless Input component for ReactLynx. It provides primitives for text entry and keyboard awareness.

    Input component that supports controlled, uncontrolled, and keyboard avoidance capabilities. Use <Input> for single-line input and <TextArea> for multi-line input.

    Basic Usage

    Use <Input> to render a single-line input field, and <TextArea> to render a multi-line text area.

    Avoiding Keyboard Overlap

    Prevent the on-screen keyboard from obscuring the input field by automatically adjusting the view when the keyboard appears

    Structure

    <KeyboardAwareRoot>
      <view className='container'>
        <KeyboardAwareResponder>
          <KeyboardAwareTrigger>
              <Input
                style={{
                  width: '100%',
                  padding: '10px',
                  backgroundColor: 'yellow',
                }}
              />
          </KeyboardAwareTrigger>
          <KeyboardAwareTrigger>
              <TextArea
                style={{
                  width: '100%',
                }}
                placeholder="textareaId:'textarea2'"
              />
          </KeyboardAwareTrigger>
        </KeyboardAwareResponder>
      </view>
    <KeyboardAwareRoot>

    API

    TextAreaProps

    bounces
    iOS
    Typeboolean·Defaulttrue
    Bounce effect for iOS
    className
    iOS
    Android
    Harmony
    Typestring
    className
    confirmType
    iOS
    Android
    Harmony
    Typesend | search | go | done | next·Default'send'
    The type of confirm button
    defaultValue
    iOS
    Android
    Harmony
    Typestring
    The value of the input
    id
    iOS
    Android
    Harmony
    Typestring·Default'input'
    The id of the input
    inputFilter
    iOS
    Android
    Harmony
    Typestring
    Filter the input content and process it in the form of regular expressions
    lineSpacing
    iOS
    Android
    Typenumber | px | rpx
    Line spacing
    maxLength
    iOS
    Android
    Harmony
    Typenumber·Default140
    Max input length
    maxLines
    iOS
    Android
    Harmony
    Typenumber·Default40
    Max input lines
    onBlur
    iOS
    Android
    Harmony
    Type(value: string) => void
    Blurred
    onConfirm
    iOS
    Android
    Harmony
    Type(value: string) => void
    Confirm button clicked
    onFocus
    iOS
    Android
    Harmony
    Type(value: string) => void
    Focused
    onInput
    iOS
    Android
    Harmony
    Type(value: string, selectionStart: number, selectionEnd: number, isComposing: boolean) => void
    Input content changed
    onSelectionChange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => void
    Input selection changed
    placeholder
    iOS
    Android
    Harmony
    Typestring
    Placeholder
    readonly
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Interaction enabled
    ref
    TypeForwardedRef<TextAreaRef>
    showSoftInputOnFocus
    iOS
    Android
    Harmony
    Typeboolean·Defaulttrue
    Show soft input keyboard while focused
    style
    iOS
    Android
    Harmony
    TypeCSSProperties
    style
    type
    iOS
    Android
    Harmony
    Typenumber | text | digit | password | tel | email·Default"text"
    Input content type
    value
    iOS
    Android
    Harmony
    Typestring
    The controlled value of the input

    KeyboardAwareTriggerProps

    children
    iOS
    Android
    Harmony
    TypeReactNode
    Children
    className
    iOS
    Android
    Harmony
    Typestring
    className
    offset
    iOS
    Android
    Harmony
    Typenumber·Default0
    Additional Offset, in px
    style
    iOS
    Android
    Harmony
    TypeCSSProperties
    style

    KeyboardAwareRootProps

    androidStatusBarPlusBottomBarHeight
    Android
    Typenumber·Default0
    The height of the Android status bar and bottom navigation bar needs to be set. If your App has an immersive status bar, only the height of the bottom navigation bar needs to be passed in. In px.
    children
    iOS
    Android
    Harmony
    TypeReactNode
    Children
    forceAttach
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Whether to force attach the root component

    KeyboardAwareResponderProps

    androidTouchSlop
    Android
    Typedefault | paging
    Android touch recognition mode. When inside a component that supports 'paging' mode, 'paging' must be enabled.
    as
    iOS
    Android
    Harmony
    TypeView | ScrollView·Default'View'
    The type of the root component
    bounceable
    iOS
    Android
    Typeboolean
    Enable bouncing effect
    bounceableOptions
    iOS
    Android
    Typeboolean | {alwaysBouncing?: boolean, enableBounceEventInFling?: boolean, enableBounces: boolean, endBounceTriggerDistance?: number, estimatedHeight?: number, estimatedWidth?: number, lowerBounceItem?: any, onScrollToBounces?: (e: scrollToBouncesInfo) => void, singleSidedBounce?: upper | lower | both | iOSBounces | none, startBounceTriggerDistance?: number, upperBounceItem?: any, validAnimationVersion?: boolean}·Default{ enableBounces: true, singleSidedBounce: "iOSBounces" },
    Props for bouncing effect
    children
    iOS
    Android
    TypeReactNode
    Children in scroll-view.
    className
    iOS
    Android
    Harmony
    Typestring
    className
    debugLog
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Display debug logs for bounce interactions.
    enableNewArch
    iOS
    Android
    Harmony
    Typeboolean·Defaulttrue on Lynx SDK >= 4.3; false otherwise
    Enable the native <scroll-view> new architecture. When enabled, bounceableOptions uses native bounces on Android, iOS, and Harmony. Defaults to true on Lynx SDK 4.3 and newer, and false on earlier versions.
    enableRTL
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Whether horizontal bounce direction should be mirrored in RTL mode.
    enableScroll
    iOS
    Android
    Harmony
    Typeboolean·Defaulttrue
    Enable scroll interaction.
    enableScrollMonitor
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Enable scroll monitor.
    estimatedItemStyle
    iOS
    Android
    TypeCSSProperties
    Estimated height and width of the items need to be set.
    experimentalNestedScrollBackward
    Harmony
    TypeselfOnly | selfFirst | parentFirst | parallel
    Adapts Harmony nested scroll behavior. 'selfOnly' scrolls only this component. 'selfFirst' scrolls this component first, then the parent after this component reaches a scroll boundary. 'parentFirst' scrolls the parent first, then this component after the parent reaches a scroll boundary. 'parallel' scrolls this component and the parent at the same time.
    experimentalNestedScrollForward
    Harmony
    TypeselfOnly | selfFirst | parentFirst | parallel
    Adapts Harmony nested scroll behavior. 'selfOnly' scrolls only this component. 'selfFirst' scrolls this component first, then the parent after this component reaches a scroll boundary. 'parentFirst' scrolls the parent first, then this component after the parent reaches a scroll boundary. 'parallel' scrolls this component and the parent at the same time.
    exposureBottom
    iOS
    Android
    Typestring·Default'10px'
    exposure-screen-margin-bottom
    exposureID
    iOS
    Android
    Harmony
    Typestring
    exposure-id for global exposure
    exposureLeft
    iOS
    Android
    Typestring·Default'10px'
    exposure-screen-margin-left
    exposureRight
    iOS
    Android
    Typestring·Default'10px'
    exposure-screen-margin-right
    exposureScene
    iOS
    Android
    Harmony
    Typestring
    exposure-scene for global exposure
    exposureTop
    iOS
    Android
    Typestring·Default'10px'
    exposure-screen-margin-top
    firstScreenItemCount
    iOS
    Android
    Typenumber·Default1
    Estimated first screen item count for lazy rendering. Remaining children will complete rendering based on exposure. When this estimate is small, it may cause a blank screen phenomenon where some nodes exist on the first screen.
    iOSBounces
    iOS
    Android
    Typeboolean·Defaulttrue
    Open the bouncing effect on iOS. If you want to use it on Android, please refer to the bounceableOption. If the bounceableOption is set, the iOSBounces property will be invalid.
    lazy
    iOS
    Android
    Typeboolean·Defaulttrue
    When enabled, only the items that are about to enter the viewport are rendered, reducing initial load time and memory usage; remaining items are rendered as they approach visibility during scroll.
    lazyOptions
    iOS
    Android
    TypeLazyOptions·Defaulttrue
    When enabled, only the items that are about to enter the viewport are rendered, reducing initial load time and memory usage; remaining items are rendered as they approach visibility during scroll.
    main-thread:gesture
    iOS
    Android
    TypeBaseGesture<BaseGestureConfig, GestureChangeEvent>
    If you want to use gesture, pass it here.
    onUIAppear
    iOS
    Android
    Harmony
    Type(e: CommonEvent) => void
    Exposure event for UI
    onUIDisappear
    iOS
    Android
    Harmony
    Type(e: CommonEvent) => void
    Disappear event for UI
    ref
    TypeForwardedRef<KeyboardAwareResponderRef>
    scene
    iOS
    Android
    Typestring
    Be used to mark the exposure timing of lazy loading. Please ensure that it is unique throughout the page.
    scrollMonitorTag
    iOS
    Android
    Harmony
    Typestring·Defaultfalse
    The tag for scroll monitor.
    scrollOrientation
    iOS
    Android
    Harmony
    Typehorizontal | vertical·Default'vertical'
    Set to 'vertical' for vertical scrolling and set to 'horizontal' for horizontal scrolling.
    scrollPropagationBehavior
    iOS
    Android
    TypeScrollPropagationBehaviorOption·Default'native'
    Controls whether scroll events propagate to parent containers. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS.
    scrollviewId
    iOS
    Android
    Typestring·Default"scrollview"
    The id of the scrollview.
    sticky
    iOS
    Android
    TypeReactElement<any, string | JSXElementConstructor<any>>
    Sticky item, designed for Tabs.
    style
    iOS
    Android
    TypeCSSProperties
    Styles for KeyboardAwareResponder KeyboardAwareResponder 的样式
    temporaryBlockScrollClass
    iOS
    Typestring·Default'BDXLynxViewPager'
    The specific class name of the container that is blocked when 'scrollPropagationBehavior' is set to be 'preventPropagate', must be informed by the container provider. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS.
    temporaryBlockScrollTag
    iOS
    Typenumber·Default0
    Used to specify the native container tag that is blocked when 'scrollPropagationBehavior' is set to be 'preventPropagate', corresponding to the Tag attribute of UIView. Needs to be specified by the native container provider. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS.
    temporaryNestedScroll
    Android
    Typeboolean
    Android-only temporary flag to control nested scroll; maps to native 'enable-nested-scroll'. Android default value is true.
    testing
    iOS
    Android
    Typeboolean
    Testing Mode.
    catchLongPress
    iOS
    Android
    Harmony
    Type(e: EventHandler<BaseTouchEvent<Target>> | undefined) => void
    Same as onLongPress, but stops the event from propagating to parent elements.
    catchTouchCancel
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Same as onTouchCancel, but stops the event from propagating to parent elements.
    catchTouchEnd
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Same as onTouchEnd, but stops the event from propagating to parent elements.
    catchTouchMove
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Same as onTouchMove, but stops the event from propagating to parent elements.
    catchTouchStart
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Same as onTouchStart, but stops the event from propagating to parent elements.
    onContentSizeChange
    iOS
    Android
    Type(res: {detail: {scrollHeight: number, scrollWidth: number}}) => void
    Being triggered when scrolling content changes.
    onLayoutChange
    iOS
    Android
    Harmony
    Type(e: EventHandler<LayoutChangeDetailEvent<Target>> | undefined) => void
    Send when UI has changed viewport size.
    onLongPress
    iOS
    Android
    Harmony
    Type(e: EventHandler<BaseTouchEvent<Target>> | undefined) => void
    Send when a touch-point is held on the UI for a period of time.
    onScroll
    iOS
    Android
    Type(e: ScrollEvent) => void
    Being triggered when scrolling occurs.
    onScrollEnd
    iOS
    Android
    Type(e: ScrollEndEvent) => void·Defaultundefined
    Being triggered when scrolling stops.
    onScrollToLower
    iOS
    Android
    Type(e: ScrollToLowerEvent) => void·Defaultundefined
    Being triggered when scrolling to lower.
    onScrollToUpper
    iOS
    Android
    Type(e: ScrollToUpperEvent) => void·Defaultundefined
    Being triggered when scrolling to upper.
    onTap
    iOS
    Android
    Harmony
    Type(e: EventHandler<BaseTouchEvent<Target>> | undefined) => void
    Send when a touch-point is tapped on the UI.
    onTouchCancel
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Send when a touch event is interrupted or cancelled before it is completed.
    onTouchEnd
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Send when a touch-point is removed from the UI.
    onTouchMove
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Send when a touch-point is moving on the UI.
    onTouchStart
    iOS
    Android
    Harmony
    Type(e: TouchEvent) => void
    Send when a touch-point is placed on the UI.
    onWheel
    Type(e: CommonEvent) => void
    Send when a wheel event is triggered on the scroll-view.

    InputProps

    className
    iOS
    Android
    Harmony
    Typestring
    className
    confirmType
    iOS
    Android
    Harmony
    Typesend | search | go | done | next·Default'send'
    The type of confirm button
    defaultValue
    iOS
    Android
    Harmony
    Typestring
    The value of the input
    id
    iOS
    Android
    Harmony
    Typestring·Default'input'
    The id of the input
    inputFilter
    iOS
    Android
    Harmony
    Typestring
    Filter the input content and process it in the form of regular expressions
    maxLength
    iOS
    Android
    Harmony
    Typenumber·Default140
    Max input length
    onBlur
    iOS
    Android
    Harmony
    Type(value: string) => void
    Blurred
    onConfirm
    iOS
    Android
    Harmony
    Type(value: string) => void
    Confirm button clicked
    onFocus
    iOS
    Android
    Harmony
    Type(value: string) => void
    Focused
    onInput
    iOS
    Android
    Harmony
    Type(value: string, selectionStart: number, selectionEnd: number, isComposing: boolean) => void
    Input content changed
    onSelectionChange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => void
    Input selection changed
    placeholder
    iOS
    Android
    Harmony
    Typestring
    Placeholder
    readonly
    iOS
    Android
    Harmony
    Typeboolean·Defaultfalse
    Interaction enabled
    ref
    TypeForwardedRef<InputRef>
    showSoftInputOnFocus
    iOS
    Android
    Harmony
    Typeboolean·Defaulttrue
    Show soft input keyboard while focused
    style
    iOS
    Android
    Harmony
    TypeCSSProperties
    style
    type
    iOS
    Android
    Harmony
    Typenumber | text | digit | password | tel | email·Default"text"
    Input content type
    value
    iOS
    Android
    Harmony
    Typestring
    The controlled value of the input

    TextAreaRef

    blur
    iOS
    Android
    Harmony
    Type() => Promise<void>
    Release focus
    focus
    iOS
    Android
    Harmony
    Type() => Promise<void>
    Require focus
    getValue
    iOS
    Android
    Harmony
    Type() => Promise<{selectionEnd: number, selectionStart: number, value: string}>
    Get input content
    setSelectionRange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => Promise<void>
    Set selection range
    setValue
    iOS
    Android
    Harmony
    Type(value: string) => Promise<void>
    Set input content

    KeyboardAwareResponderRef

    as
    Type() => View | ScrollView

    InputRef

    blur
    iOS
    Android
    Harmony
    Type() => Promise<void>
    Release focus
    focus
    iOS
    Android
    Harmony
    Type() => Promise<void>
    Require focus
    getValue
    iOS
    Android
    Harmony
    Type() => Promise<{selectionEnd: number, selectionStart: number, value: string}>
    Get input content
    setSelectionRange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => Promise<void>
    Set selection range
    setValue
    iOS
    Android
    Harmony
    Type(value: string) => Promise<void>
    Set input content
    Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.