@atom-design-mog/input

A fully customizable, multi-type Input component for React Native. Supports text, select, multiselect, selectWithSearch, chips, withButton, and more with a clean UI and flexible props.

📦 Installation

Install with npm:

npm install @atom-design-mog/input

Or with yarn:

yarn add @atom-design-mog/input

🚀 Usage

import Input from '@atom-design-mog/input';

// Simple text input
<Input
  type="text"
  label="Your Name"
  placeholder="Enter name"
  value={textValue}
  onChangeText={setTextValue}
/>

✨ Supported Input Types

• text — Normal text input
• select — Dropdown select (single)
• multiselect — Multi-select dropdown
• selectWithSearch — Select with searchable options
• chips — Add/remove dynamic chips
• withButton — Input with inline button

🧩 Features Preview

• Left / right icon support (emoji-based by default)
• Placeholder, label, and error display
• Modal-based dropdowns with search and multi-select footer
• Chips UI with add/remove callbacks
• Fully controlled via value and onChangeText

📘 Basic Examples

Text input

<Input
  type="text"
  label="Search"
  leftIcon="search"
  placeholder="Search..."
  value={searchValue}
  onChangeText={setSearchValue}
/>

Select dropdown

<Input
  type="select"
  label="Select a fruit"
  placeholder="Choose"
  options={[{ label: 'Apple', value: 'Apple' }, { label: 'Banana', value: 'Banana' }]}
  value={selectValue}
  onChangeText={setSelectValue}
/>

Chips input

<Input
  type="chips"
  label="Tags"
  chips={chips}
  onAddChip={handleAddChip}
  onRemoveChip={handleRemoveChip}
/>

With button

<Input
  type="withButton"
  label="Enter OTP"
  placeholder="OTP"
  value={otp}
  onChangeText={setOtp}
  buttonProps={{ title: 'Verify', onPress: () => verifyOtp(otp) }}
/>

📋 Props Reference

| Prop | Type | Description | | -------------- | ------------ | -------------------------------------------------------- | | type | string | Defines component type (text, select, chips, etc.) | | placeholder | string | Placeholder text | | value | string/array | Input value | | onChangeText | function | Callback on change | | disabled | boolean | Disables input | | leftIcon | string | Built-in emoji icon | | rightIcon | string | Built-in emoji icon | | options | array | For select/multiselect | | buttonProps | object | Props for inline button (type = withButton) | | label | string | Top label | | error | string | Error message | | chips | array | Initial chip values | | onAddChip | function | Add new chip | | onRemoveChip | function | Remove chip |

🧪 Full Test Screen (Copy/Paste to Test)

import React, { useState } from 'react';
import { View, ScrollView } from 'react-native';
import Input from '@atom-design-mog/input';

export default function TestInputsScreen() {
  const [textValue, setTextValue] = useState('');
  const [searchValue, setSearchValue] = useState('');
  const [selectValue, setSelectValue] = useState('');
  const [multiselectValue, setMultiselectValue] = useState([]);
  const [withButtonValue, setWithButtonValue] = useState('');
  const [chips, setChips] = useState(['Chip 1', 'Chip 2']);
  const [selectWithSearchValue, setSelectWithSearchValue] = useState([]);

  const options = [
    { label: 'Option 1 - Apple', value: 'Apple' },
    { label: 'Option 2 - Banana', value: 'Banana' },
    { label: 'Option 3 - Cherry', value: 'Cherry' },
    { label: 'Option 4 - Strawberry', value: 'Strawberry' },
    { label: 'Option 5 - Peach', value: 'Peach' },
  ];

  const handleAddChip = (chip) => {
    const trimmed = chip.trim();
    if (trimmed && !chips.includes(trimmed)) setChips(prev => [...prev, trimmed]);
  };

  const handleRemoveChip = (chip) => setChips(prev => prev.filter(c => c !== chip));

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 20 }}>
        <Input type="text" label="Normal Input" placeholder="Enter text" value={textValue} onChangeText={setTextValue} />
        <Input type="text" label="Disabled Input" placeholder="Disabled" disabled />
        <Input type="text" label="Search Input" leftIcon="search" placeholder="Search..." value={searchValue} onChangeText={setSearchValue} />
        <Input type="select" label="Select Dropdown" placeholder="Select an option" options={options} value={selectValue} onChangeText={setSelectValue} />
        <Input type="multiselect" label="Multiselect" placeholder="Multi select" options={options} value={multiselectValue} onChangeText={setMultiselectValue} />
        <Input type="select" label="Select with Error" placeholder="Select value" options={options} error="You must select a value" />
        <Input type="chips" label="Chips" chips={chips} onAddChip={handleAddChip} onRemoveChip={handleRemoveChip} />
        <Input type="withButton" label="Input + Button" value={withButtonValue} onChangeText={setWithButtonValue} buttonProps={{ title: 'Submit', onPress: () => console.log(withButtonValue) }} />
        <Input type="selectWithSearch" label="Select with Search" options={options} value={selectWithSearchValue} onChangeText={setSelectWithSearchValue} />
      </View>
    </ScrollView>
  );
}

👤 Author

Avi Gupta