InputGroupNew

Import

import { InputGroup } from 'heroui-native';

Anatomy

<InputGroup>
  <InputGroup.Prefix>...</InputGroup.Prefix>
  <InputGroup.Input />
  <InputGroup.Suffix>...</InputGroup.Suffix>
</InputGroup>

• InputGroup: Layout container that wraps Prefix, Input, and Suffix. Provides animation settings and a measurement context so Prefix/Suffix widths are automatically applied as padding on the Input.
• InputGroup.Prefix: Absolutely positioned View anchored to the left side of the Input. Its measured width is applied as paddingLeft on InputGroup.Input automatically.
• InputGroup.Suffix: Absolutely positioned View anchored to the right side of the Input. Its measured width is applied as paddingRight on InputGroup.Input automatically.
• InputGroup.Input: Pass-through to the Input component. Accepts all Input props directly. Automatically receives paddingLeft/paddingRight from measured Prefix/Suffix.

Usage

Basic Usage

The InputGroup component uses compound parts to attach prefix and suffix content to an input.

<InputGroup>
  <InputGroup.Prefix>...</InputGroup.Prefix>
  <InputGroup.Input placeholder="Enter text" />
  <InputGroup.Suffix>...</InputGroup.Suffix>
</InputGroup>

With Prefix Only

Attach leading content such as icons to the input.

<InputGroup>
  <InputGroup.Prefix isDecorative>
    <PersonIcon size={16} />
  </InputGroup.Prefix>
  <InputGroup.Input placeholder="Username" />
</InputGroup>

With Suffix Only

Attach trailing content such as icons to the input.

<InputGroup>
  <InputGroup.Input placeholder="Search products..." />
  <InputGroup.Suffix isDecorative>
    <MagnifierIcon size={16} />
  </InputGroup.Suffix>
</InputGroup>

Decorative vs Interactive

Set isDecorative on Prefix or Suffix to make touches pass through to the Input and hide the content from screen readers. Omit it when the decorator contains interactive elements.

<InputGroup>
  <InputGroup.Prefix isDecorative>
    <LockIcon size={16} />
  </InputGroup.Prefix>
  <InputGroup.Input placeholder="Enter your password" secureTextEntry />
  <InputGroup.Suffix>
    <Pressable onPress={togglePasswordVisibility}>
      <EyeIcon size={16} />
    </Pressable>
  </InputGroup.Suffix>
</InputGroup>

Disabled State

Disable the entire input group. The disabled state cascades to all child components.

<InputGroup isDisabled>
  <InputGroup.Prefix isDecorative>
    <LockIcon size={16} />
  </InputGroup.Prefix>
  <InputGroup.Input placeholder="Disabled input" />
</InputGroup>

With TextField Integration

Combine with TextField, Label, and Description for full form field support.

<TextField isRequired>
  <Label>Email</Label>
  <InputGroup>
    <InputGroup.Prefix isDecorative>
      <MailIcon size={16} />
    </InputGroup.Prefix>
    <InputGroup.Input placeholder="you@example.com" keyboardType="email-address" />
  </InputGroup>
  <Description>We'll never share your email</Description>
</TextField>

Example

import { InputGroup } from 'heroui-native';
import { Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
import { Pressable, View } from 'react-native';

export default function InputGroupExample() {
  const [value, setValue] = useState('');
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  return (
    <View className="px-5">
      <InputGroup>
        <InputGroup.Prefix isDecorative>
          <Ionicons name="lock-closed-outline" size={16} color="#888" />
        </InputGroup.Prefix>
        <InputGroup.Input
          value={value}
          onChangeText={setValue}
          placeholder="Enter your password"
          secureTextEntry={!isPasswordVisible}
        />
        <InputGroup.Suffix>
          <Pressable
            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
            hitSlop={20}
          >
            <Ionicons
              name={isPasswordVisible ? 'eye-off-outline' : 'eye-outline'}
              size={16}
              color="#888"
            />
          </Pressable>
        </InputGroup.Suffix>
      </InputGroup>
    </View>
  );
}

You can find more examples in the GitHub repository.

API Reference

InputGroup

AnimationRootDisableAll

Animation configuration for the InputGroup root component. Can be:

• "disable-all": Disable all animations including children (cascades down)
• undefined: Use default animations

InputGroup.Prefix

InputGroup.Suffix

InputGroup.Input

Pass-through to the Input component. Accepts all Input props directly.