---
name: "Input"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Input - Input field"
---

## Input

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Input field component supporting multiple input types and keyboard configurations.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` | No | - | Input value |
| `type` | `"text" \| "number" \| "digit"` | No | `"text"` | Input type |
| `name` | `string` | No | - | Form field name, used as the key on form submit |
| `password` | `boolean` | No | - | Whether the input is a password field |
| `placeholder` | `string` | No | - | Placeholder when empty |
| `placeholderStyle` | `any \| string` | No | - | Placeholder style |
| `disabled` | `boolean` | No | - | Whether disabled |
| `maxLength` | `number` | No | `140` | Maximum input length; set to -1 for no limit |
| `confirmType` | `"send" \| "search" \| "next" \| "go" \| "done"` | No | `"done"` | Set the label of the bottom-right keyboard button; effective only when type='text' |
| `onInput` | `(event: InputInputEvent) => void` | No | - | Triggered on keyboard input |
| `onConfirm` | `(event: InputConfirmEvent) => void` | No | - | Triggered when the Done button is tapped |
| `onFocus` | `(event: InputFocusEvent) => void` | No | - | Triggered on focus |
| `onBlur` | `(event: InputBlurEvent) => void` | No | - | Triggered on blur |

### Referenced Types

##### `interface` InputInputEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"input"` | Event type |
| `detail` | `InputInputDetail` | Event data |
| `value` | `string` | Current input value |

##### `interface` InputConfirmEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"confirm"` | Event type |
| `detail` | `InputValueDetail` | Event data |

##### `interface` InputFocusEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"focus"` | Event type |
| `detail` | `InputValueDetail` | Event data |

##### `interface` InputBlurEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"blur"` | Event type |
| `detail` | `InputValueDetail` | Event data |

##### `interface` InputInputDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Input value |
| `cursor` | `number` | Cursor position |
| `keyCode` | `number` | Key value |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` InputValueDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Input value |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
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

```tsx
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

```tsx
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.