On this page
FAQDoes the input field support click events such as tap and touch?How do I clear input data using JS code?How do I handle jumping or delayed input content?What should I do if the input loses focus when typing Chinese on iOS?Does the Input component support auto focus (autofocus)?

Input

Requires:
@ray-js/ray≥0.5.10

Description

Input field component supporting multiple input types and keyboard configurations.

Props

PropertyTypeRequiredDefaultDescription
valuestringNo-Input value
type"text" | "number" | "digit" | "idcard"NotextInput type
namestringNo-Form field name, used as the key on form submit
passwordbooleanNo-Whether the input is a password field
placeholderstringNo-Placeholder when empty
placeholderStyleany | stringNo-Placeholder style
disabledbooleanNo-Whether disabled
maxLengthnumberNo140Maximum input length; set to -1 for no limit
confirmType"send" | "search" | "next" | "go" | "done"NodoneSet the label of the bottom-right keyboard button; effective only when type='text'
No-Triggered on keyboard input
No-Triggered when the Done button is tapped
No-Triggered on focus
No-Triggered on blur

Valid Values

type
ValueDescriptionSince
textText input keyboard-
numberNumeric input keyboard-
digitNumeric input keyboard with a decimal point-
idcardID card input keyboard-
confirmType
ValueDescriptionSince
sendThe bottom-right button displays “Send”-
searchThe bottom-right button displays “Search”-
nextThe bottom-right button displays “Next”-
goThe bottom-right button displays “Go”-
doneThe bottom-right button displays “Done”-

Examples

Basic usage

import React from 'react';
import { Input, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Input
        placeholder="Please enter content"
        onInput={(e) => console.log('Input:', e.detail.value)}
      />
    </View>
  );
}

Different types

import React, { useState } from 'react';
import { Input, View, Text } from '@ray-js/ray';

export default function () {
  const [textValue, setTextValue] = useState('');
  const [numberValue, setNumberValue] = useState('');
  const [passwordValue, setPasswordValue] = useState('');

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>Text input:</Text>
        <Input
          type="text"
          placeholder="Please enter text"
          value={textValue}
          onInput={(e) => setTextValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Number input:</Text>
        <Input
          type="number"
          placeholder="Please enter a number"
          value={numberValue}
          onInput={(e) => setNumberValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Password input:</Text>
        <Input
          password
          placeholder="Please enter a password"
          value={passwordValue}
          onInput={(e) => setPasswordValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
    </View>
  );
}

Input restrictions and disabled

import React from 'react';
import { Input, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>Max length 10:</Text>
        <Input
          maxLength={10}
          placeholder="Up to 10 characters"
          placeholderStyle={{ color: '#ccc', fontSize: '14px' }}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Disabled state:</Text>
        <Input
          disabled
          value="Not editable"
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Confirm button is Search:</Text>
        <Input
          confirmType="search"
          placeholder="Type and tap Search on the keyboard"
          onConfirm={(e) => console.log('Confirm:', e.detail.value)}
          onFocus={(e) => console.log('Focus:', e.detail.value)}
          onBlur={(e) => console.log('Blur:', e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
    </View>
  );
}

FAQ

Does the input field support click events such as tap and touch?

Yes, all components support tap and touch events.

How do I clear input data using JS code?

Use setData to set the value attribute to empty. Make sure the value passed to setData is different from the current value.

How do I handle jumping or delayed input content?

You can use a debounce function to avoid frequent updates in the onInput callback.

What should I do if the input loses focus when typing Chinese on iOS?

On iOS, calling setData inside onInput can cause focus loss when typing Chinese. Options: ① Apply debounce to setData; ② Store data under this inside onInput to avoid triggering setData repeatedly.

Does the Input component support auto focus (autofocus)?

  • Auto focus (autofocus) is not supported. Focus must be triggered by a user action.