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
    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, debugLog?: boolean, enableBounceEventInFling?: boolean, enableBounces: boolean, endBounceTriggerDistance?: number, estimatedHeight?: number, estimatedWidth?: number, lowerBounceItem?: any, onScrollToBounces?: (e: {direction: upper | lower}) => 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
    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.
    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
    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
    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
    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 | undefined) => void
    Same as onLongPress, but stops the event from propagating to parent elements.
    catchTouchCancel
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Same as onTouchCancel, but stops the event from propagating to parent elements.
    catchTouchEnd
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Same as onTouchEnd, but stops the event from propagating to parent elements.
    catchTouchMove
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Same as onTouchMove, but stops the event from propagating to parent elements.
    catchTouchStart
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Same as onTouchStart, but stops the event from propagating to parent elements.
    onContentSizeChange
    iOS
    Android
    Type(res: Record<string, unknown>) => void
    Being triggered when scrolling content changes.
    onLayoutChange
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when UI has changed viewport size.
    onLongPress
    iOS
    Android
    Harmony
    Type(e: EventHandler | 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: [object Object] | undefined) => void·Defaultundefined
    Being triggered when scrolling stops.
    onScrollToLower
    iOS
    Android
    Type(e: [object Object] | undefined) => void·Defaultundefined
    Being triggered when scrolling to lower.
    onScrollToUpper
    iOS
    Android
    Type(e: [object Object] | undefined) => void·Defaultundefined
    Being triggered when scrolling to upper.
    onTap
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when a touch-point is tapped on the UI.
    onTouchCancel
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when a touch event is interrupted or cancelled before it is completed.
    onTouchEnd
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when a touch-point is removed from the UI.
    onTouchMove
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when a touch-point is moving on the UI.
    onTouchStart
    iOS
    Android
    Harmony
    Type(e: EventHandler | undefined) => void
    Send when a touch-point is placed on the UI.

    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
    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
    Release focus
    focus
    iOS
    Android
    Harmony
    Type() => Promise
    Require focus
    getValue
    iOS
    Android
    Harmony
    Type() => Promise
    Get input content
    setSelectionRange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => Promise
    Set selection range
    setValue
    iOS
    Android
    Harmony
    Type(value: string) => Promise
    Set input content

    KeyboardAwareResponderRef

    as
    Type() => [object Object]

    InputRef

    blur
    iOS
    Android
    Harmony
    Type() => Promise
    Release focus
    focus
    iOS
    Android
    Harmony
    Type() => Promise
    Require focus
    getValue
    iOS
    Android
    Harmony
    Type() => Promise
    Get input content
    setSelectionRange
    iOS
    Android
    Harmony
    Type(selectionStart: number, selectionEnd: number) => Promise
    Set selection range
    setValue
    iOS
    Android
    Harmony
    Type(value: string) => Promise
    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.