Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

<input>

<input> is used to create interactive input controls that allow users to input and edit single-line text.

Usage

Basic

Below is a basic usage example of the <input> component:

inputsrc/base/index.tsx
Preview

Keyboard Avoidance

<input> doesn't automatically avoid keyboards, but you can adjust its position by listening to keyboard events and modifying its position accordingly:

inputsrc/auto-height/index.tsx
Preview

Attributes

Property names and values are used to describe the component's behavior and appearance.

placeholder

// DefaultValue: undefined
placeholder?: string

Placeholder text

confirm-type

// DefaultValue: undefined
'confirm-type'?: 'send' | 'search' | 'go' | 'done' | 'next';

Specifies the behavior of the IME's enter key

maxlength

// DefaultValue: 140
maxlength?: number;

Maximum character limit for the input box

readonly

// DefaultValue: false
readonly?: boolean;

Whether the input box is interactive (doesn't affect component method calls)

show-soft-input-on-focus

// DefaultValue: true
'show-soft-input-on-focus'?: boolean;

Whether to show soft keyboard when focused

type

// DefaultValue: 'text'
type?: 'text' | 'number' | 'digit' | 'password' | 'tel' | 'email';

Specifies keyboard type:

  • text\tel\email: Full symbols
  • number: 0-9 +-.
  • digit: 0-9 .
  • password: Content masked as *
INFO

Different IMEs may have different visual representations

input-filter

// DefaultValue: undefined
'input-filter'?: string;

Single character filter using regular expression

Events

Frontend can listen to component behavior using event handler attributes.

bindfocus

export interface InputFocusEvent {
  value: string;
}
 bindfocus?: (e: BaseEvent<'bindfocus', InputFocusEvent>) => void;

Callback when input box is focused

bindblur

export interface InputBlurEvent {
  value: string;
}
bindblur?: (e: BaseEvent<'bindblur', InputBlurEvent>) => void;

Callback when input box loses focus

bindconfirm

export interface InputConfirmEvent {
  value: string;
}
bindconfirm?: (e: BaseEvent<'bindconfirm', InputConfirmEvent>) => void;

Callback when IME enter key is pressed

bindinput

export interface InputInputEvent {
  value: string;
  selectionStart: number;
  selectionEnd: number;
  isComposing?: boolean;
}
bindinput?: (e: BaseEvent<'bindinput', InputInputEvent>) => void;

Callback when input content changes

bindselection

export interface InputSelectionEvent {
  selectionStart: number;
  selectionEnd: number;
}
bindselection?: (e: BaseEvent<'bindselection', InputSelectionEvent>) => void;

Callback when cursor position changes

Methods

Frontend can execute component methods via SelectorQuery API.

focus

export interface InputFocusMethod extends BaseMethod {
  method: 'focus';
}

Focus the input box

blur

export interface InputBlurMethod extends BaseMethod {
  method: 'blur';
}

Remove focus from input box

getValue

export interface InputGetValueMethod extends BaseMethod {
  method: 'getValue';
  success?: Callback<{
    value: string;
    selectionStart: number;
    selectionEnd: number;
    isComposing: boolean;
  }>;
}

Get input content

setValue

export interface InputSetValueMethod extends BaseMethod {
  method: 'setValue';
  params: {
    value: string;
  };
}

Set input content

setSelectionRange

export interface InputSetSelectionRangeMethod extends BaseMethod {
  method: 'setSelectionRange';
  params: {
    selectionStart: number;
    selectionEnd: number;
  };
}

Set cursor position

Compatibility

LCD tables only load in the browser

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.