@atom_design/input

A versatile React Native input component supporting multiple input types including text, select, multiselect, chips, and search. Part of the Atom Design System.

Features

• 📝 Multiple Types - Text, select, multiselect, chips, search, withButton
• 🔍 Searchable Dropdown - Filter options with search
• 🏷️ Chips Input - Add/remove tags dynamically
• 🎨 Customizable - Style all elements with custom props
• ♿ Accessible - Full screen reader support
• ⚡ Optimized - Memoized callbacks for performance
• 💪 TypeScript - Full type definitions included

📦 Installation

npm install @atom_design/input
# or
yarn add @atom_design/input

Peer Dependencies

npm install react react-native prop-types react-native-vector-icons

Note: Make sure to follow the react-native-vector-icons installation guide for your platform.

🚀 Basic Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import Input from '@atom_design/input';

const App = () => {
  const [name, setName] = useState('');

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Input
        type="text"
        label="Your Name"
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />
    </View>
  );
};

export default App;

🧩 Input Types

Text Input

<Input
  type="text"
  label="Email"
  placeholder="Enter email"
  leftIcon="email"
  value={email}
  onChangeText={setEmail}
/>

Select Dropdown

<Input
  type="select"
  label="Country"
  placeholder="Select country"
  options={[
    { label: 'United States', value: 'us' },
    { label: 'Canada', value: 'ca' },
    { label: 'United Kingdom', value: 'uk' },
  ]}
  value={country}
  onChangeText={setCountry}
/>

Multi-Select

<Input
  type="multiselect"
  label="Skills"
  placeholder="Select skills"
  options={[
    { label: 'JavaScript', value: 'js' },
    { label: 'TypeScript', value: 'ts' },
    { label: 'React', value: 'react' },
  ]}
  value={skills}
  onChangeText={setSkills}
/>

Searchable Select

<Input
  type="selectWithSearch"
  label="City"
  placeholder="Search city"
  options={cities}
  value={selectedCities}
  onChangeText={setSelectedCities}
/>

Chips Input

<Input
  type="chips"
  label="Tags"
  chips={tags}
  onAddChip={(chip) => setTags([...tags, chip])}
  onRemoveChip={(chip) => setTags(tags.filter(t => t !== chip))}
/>

Input with Button

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

📋 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | string | 'text' | Input type: text, select, multiselect, selectWithSearch, chips, withButton | | placeholder | string | - | Placeholder text | | value | string \| array | - | Current value | | onChangeText | function | - | Change handler | | disabled | boolean | false | Disable input | | leftIcon | string | - | Left icon name | | rightIcon | string | - | Right icon name | | options | Option[] | [] | Options for select types | | buttonProps | ButtonProps | {} | Button config for withButton | | label | string | - | Label above input | | error | string | - | Error message | | chips | string[] | [] | Chips for chips type | | onAddChip | function | - | Add chip callback | | onRemoveChip | function | - | Remove chip callback | | containerStyle | ViewStyle | - | Outer container style | | inputStyle | ViewStyle | - | Input container style | | labelStyle | TextStyle | - | Label style | | errorStyle | TextStyle | - | Error text style | | testID | string | - | Test ID |

🎨 Available Icons

Uses MaterialIcons from react-native-vector-icons. Common shortcuts:

| Shortcut | MaterialIcons Name | |----------|-------------------| | search | search | | email | email | | send | send | | close | close | | check | check | | eye | visibility | | eye-off | visibility-off | | lock | lock | | user | person | | phone | phone | | calendar | calendar-today |

You can also use any valid MaterialIcons name directly.

🧪 Test Screen Example

import React, { useState } from 'react';
import { SafeAreaView, ScrollView, Text, StyleSheet } from 'react-native';
import Input from '@atom_design/input';

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
  { label: 'Orange', value: 'orange' },
  { label: 'Mango', value: 'mango' },
];

const InputTestScreen = () => {
  const [text, setText] = useState('');
  const [email, setEmail] = useState('');
  const [selected, setSelected] = useState('');
  const [multiSelected, setMultiSelected] = useState([]);
  const [searchSelected, setSearchSelected] = useState([]);
  const [chips, setChips] = useState(['React', 'Native']);
  const [otp, setOtp] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.header}>@atom_design/input</Text>

        {/* Text Input */}
        <Input
          type="text"
          label="Name"
          placeholder="Enter your name"
          value={text}
          onChangeText={setText}
        />

        {/* With Icon */}
        <Input
          type="text"
          label="Email"
          placeholder="Enter email"
          leftIcon="email"
          value={email}
          onChangeText={setEmail}
        />

        {/* Disabled */}
        <Input
          type="text"
          label="Disabled Input"
          placeholder="Cannot edit"
          disabled
        />

        {/* With Error */}
        <Input
          type="text"
          label="Password"
          placeholder="Enter password"
          leftIcon="lock"
          error="Password is required"
        />

        {/* Select */}
        <Input
          type="select"
          label="Select Fruit"
          placeholder="Choose one"
          options={options}
          value={selected}
          onChangeText={setSelected}
        />

        {/* Multiselect */}
        <Input
          type="multiselect"
          label="Select Multiple"
          placeholder="Choose fruits"
          options={options}
          value={multiSelected}
          onChangeText={setMultiSelected}
        />

        {/* Searchable Select */}
        <Input
          type="selectWithSearch"
          label="Search & Select"
          placeholder="Search fruits"
          options={options}
          value={searchSelected}
          onChangeText={setSearchSelected}
        />

        {/* Chips */}
        <Input
          type="chips"
          label="Tags"
          chips={chips}
          onAddChip={(chip) => {
            if (!chips.includes(chip)) {
              setChips([...chips, chip]);
            }
          }}
          onRemoveChip={(chip) => setChips(chips.filter(c => c !== chip))}
        />

        {/* With Button */}
        <Input
          type="withButton"
          label="OTP"
          placeholder="Enter OTP"
          value={otp}
          onChangeText={setOtp}
          buttonProps={{
            title: 'Verify',
            onPress: () => console.log('OTP:', otp),
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 24,
    color: '#333',
  },
});

export default InputTestScreen;

📝 TypeScript

Full TypeScript support included:

import Input, { Option, InputProps } from '@atom_design/input';

const options: Option[] = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

const MyInput: React.FC = () => {
  const [value, setValue] = useState<string>('');

  return (
    <Input
      type="select"
      label="Choose"
      options={options}
      value={value}
      onChangeText={(val) => setValue(val as string)}
    />
  );
};

♿ Accessibility

The Input component includes full accessibility support:

• All interactive elements have proper accessibilityRole
• Labels and hints for screen readers
• Focus management in dropdowns
• Live region announcements for errors

👤 Author

Atom Design Team

📄 License

MIT © Atom Design